Blocks & collapsibles

Default block

Block title

This is a default block, with very simple markup. It can take anything as content, with or without padding.

<div class="block">
	<h3 class="block-title">Block title</h3>
	<div class="with-padding">

		<!-- content here -->

	</div>
</div>

With controls

Edit

... and also embed any element you need, such as buttons.

<div class="block">
	<div class="block-title">
		<h3>Block title</h3>
		<div class="button-group absolute-right compact">
			<a href="#" class="button icon-pencil">Edit</a>
			<a href="#" class="button icon-gear with-tooltip" title="Other actions"></a>
			<a href="#" class="button icon-trash with-tooltip confirm" title="Delete"></a>
		</div>
	</div>
	<div class="with-padding">

		<!-- content here -->

	</div>
</div>

Details blocks

Required plugin

This feature requires the plugin file js/libs/jquery.details.min.js
Detail summary

Details look pretty much like blocks, but they may be closed or opened simply by clicking on the title.

They use the HTML5 <details> element, with polyfill support for older browsers.

<details class="details margin-bottom" open>
	<summary>Title</summary>
	<div class="with-padding">

		<!-- content here -->

	</div>
</details>

Add or remove the attribute open to change how the detail element is by default.

Accordion

Required plugin

This feature requires the plugin file js/developr.accordions.js
First section

First section content

The accordion plugin may also equalize the sections' height, just by adding the class same-height - as for this example.

Give it a try!

Second section
Second section content
Third section
Third section content 
<dl class="accordion same-height">
	<dt>First section</dt>
	<dd>
		<div class="with-padding">

			<!-- content here -->

		</div>
	</dd>

	<dt>Second section</dt>
	<dd>
		<div class="with-padding">

			<!-- content here -->

		</div>
	</dd>

	...
</dl>

The example shows an extra div inside each section with the padding class, instead of adding the class to the dd element itself: this is required for fluid transitions, jQuery has some issues animating blocks with padding sometimes.

Toggle mode

You can switch the toggle mode, in which panels open and close on click independently, on by adding the class toggle-mode to the accordion:

First section

First section content

The accordion plugin may also equalize the sections' height, just by adding the class same-height - as for this example.

Give it a try!

Second section
Second section content
Third section
Third section content 
<dl class="accordion toggle-mode">
	...
</dl>