bandoneon

Question 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu ultricies nisi. Vivamus ac hendrerit massa, sit amet rhoncus orci. Donec non nunc placerat, dapibus urna a, sagittis quam. Curabitur velit justo, auctor non neque a, lobortis pretium arcu.

Question 2

Lorem ipsum dolor sit amet ...

Question 3 -- has nested accordion

Nested Question 1

Fusce varius, magna id ultrices porttitor, libero sem suscipit elit, vitae dignissim lacus est eu augue. Nam eget gravida erat. Curabitur vel lacinia dolor, sed efficitur dolor. Suspendisse potenti. Maecenas sodales id nisl eget fringilla. Nulla neque nibh, molestie sit amet gravida non, interdum blandit purus. Aenean suscipit odio at elit mollis pretium. In vulputate lacus dui, lobortis dictum sapien lobortis quis. Nam cursus ipsum a quam ullamcorper pulvinar.

Nested Question 2

Aenean suscipit odio at elit mollis pretium. In vulputate lacus dui, lobortis dictum sapien lobortis quis. Nam cursus ipsum a quam ullamcorper pulvinar.

Nested Question 3

Lorem ipsum dolor sit amet ...

Markup

<div class='container'>
	
	<h3 class='bandoneon-heading'>Headin</h3>
	<div class="bandoneon-content">
			. . .
	</div>
	
	<h3 class='bandoneon-heading'>Headin</h3>
	<div class="bandoneon-content opened">
		...
	</div>
	
	<h3 class='bandoneon-heading'>Heading (with nested bandoneon)</h3>
	<div class="bandoneon-content nested">
		<h3 class='nested-bandoneon-heading'>Nested Heading</h3>
		<div class="nested-bandoneon-content" id="first">
			. . .
		</div>
		
		<h3 class='nested-bandoneon-heading'>Nested Heading</h3>
		<div class="nested-bandoneon-content">
			. . .
		</div>
		
		<h3 class='nested-bandoneon-heading'>Nested Heading</h3>
		<div class="nested-bandoneon-content">
			. . .
		</div>
	</div>
</div>

JavaScript

// --- on document ready ---
$(function() {

// --- simple init ---
// --- default options ---
$('.container').bandoneon();

// --- nested bandoneon ---
// --- make sure to have different heading and content selectors ---
// --- custom options ---
$('.nested').bandoneon({
		toggle: '.nested-bandoneon-heading',
		content: '.nested-bandoneon-content',
		event: 'hover',
		opened: '#first', 
		speed: 'slow'
});

// --- default options ---
{
	toggle: '.bandoneon-heading', // heading selector
	content: '.bandoneon-content', // content selector
	opened: null, // the one that starts open
	event: 'click', // event that triggers the toggle
	speed: 'fast' // toggle speed
}

});

Styles

/**
 * The basic necessary CSS to have the bandoneon working:
 *
 * The rest is up to you, go wild and make a cool bandoneon!!!
 */
<content-selector>{
    display: none;
}