Panels

@@adsense
Default
Panel Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida.
With icon
Panel Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida.
Collapsible
Panel Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida.
Alert (&.alert)
Panel Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida.
Warning (&.warning)
Panel Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida.
Success (&.success)
Panel Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida.
HTML

                <!-- Default -->
                <div class="panel">
                    <div class="heading">
                        <span class="title">Panel Title</span>
                    </div>
                    <div class="content">
                        ... panel content ...
                    </div>
                </div>

                <!-- With icon (font) -->
                <div class="panel">
                    <div class="heading">
                        <span class="icon mif-home"></span>
                        <span class="title">Panel Title</span>
                    </div>
                    <div class="content">
                        ... panel content ...
                    </div>
                </div>

                <!-- With icon (img) -->
                <div class="panel">
                    <div class="heading">
                        <img class="icon" src="...">
                        <span class="title">Panel Title</span>
                    </div>
                    <div class="content">
                        ... panel content ...
                    </div>
                </div>
Collapsible, declarative style

                <div class="panel" data-role="panel">...</div>
Collapsible, javascript style

                <div class="panel" id="panel">...</div>

                <script>
                    $(function(){
                        $("#panel").panel();
                    });
                </script>