<p>Our goal is to leave the main content area pretty much unstyled except for adding in a bit of padding and applying the theme font family and color. We don't use CSS resets or a lot of custom styles because standard HTML markup is provides a lot of visual texture out of the box. By taking a light hand with content styling, it gives designers and developers a clean slate to work with instead of fighting against a lot of complex styles. Here is what standard HTML markup looks like by default:</p>
<p>To create a collapsible block of content, create a container and add the <code>data-role="collapsible"</code> attribute.</p>
<p>Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>
<p>After the heading, add any HTML markup you want to be collapsible. The framework will wrap all this markup in a container that will be hidden or shown when the heading is clicked.</p>
<pre><code>
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content.</p>
</div>
</pre></code>
<p>By default, the content will be expaneded. To collapse the content when the page loads, add the <code>data-state="collapsed"</code> attribute to the wrapper.</p>
<p>The collapsible content is minimally styled -- we just add a bit of margin between the bar and content but you can add custom styles to tweak the appearance of the collapsible container or heading button.</p>
