Magic Accordion
https://github.com/lukesnowden/magic-accordion
There are plenty of accordion plugins out there but I wanted a really simple one for the user (client) to create from a single WYSIWYG editor instead of creating numerous amounts of fields in said CMS.
All the user has to do is separate their content with a H2 tag (or what you define) and the accordion will magically be created!
// these are defaults, no need to pass the options if not needed
$('.content')
.on( 'created.magic', function(e){
for( i in e.sections ) {
var section = e.sections[i];
section.heading.prepend( '<i class="fa fa-chevron-circle-down"></i>' );
}
})
.on( 'opened.magic', function(e){
console.log( e.body );
})
.on( 'closed.magic', function(e){
console.log( e.head );
}).magicAccordion({
headingTag : 'h2',
bodyClass : 'body',
headClass : 'head',
activeClass : 'active',
speed : 200
});
<div class="content">
... all your content here
</div>
var app = $('.content').data( 'magic-accordion' );
// app.unbind();
// app.rebind();
Some amazing header
Look at my sexy body
Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Cum sociis natoque penatibus et magnis dis parturient. Unam incolunt Belgae, aliam Aquitani, tertiam. Hi omnes lingua, institutis, legibus inter se differunt.
Curabitur blandit tempus ardua ridiculus sed magna. Quam diu etiam furor iste tuus nos eludet? Curabitur est gravida et libero vitae dictum. Qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, legibus inter se differunt. Curabitur blandit tempus ardua ridiculus sed magna.
Hi omnes lingua, institutis, legibus inter se differunt. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Curabitur blandit tempus ardua ridiculus sed magna. Salutantibus vitae elit libero, a pharetra augue.
And yet another...
Curabitur blandit tempus ardua ridiculus sed magna. Inmensae subtilitatis, obscuris et malesuada fames. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Unam incolunt Belgae, aliam Aquitani, tertiam. Pellentesque habitant morbi tristique senectus et netus. Qui ipsorum lingua Celtae, nostra Galli appellantur.
Some amazing header
Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Cum sociis natoque penatibus et magnis dis parturient. Unam incolunt Belgae, aliam Aquitani, tertiam. Hi omnes lingua, institutis, legibus inter se differunt.
- list item 1
- list item 2
- list item 3
Curabitur blandit tempus ardua ridiculus sed magna. Quam diu etiam furor iste tuus nos eludet? Curabitur est gravida et libero vitae dictum. Qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, legibus inter se differunt. Curabitur blandit tempus ardua ridiculus sed magna.
Hi omnes lingua, institutis, legibus inter se differunt. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Curabitur blandit tempus ardua ridiculus sed magna. Salutantibus vitae elit libero, a pharetra augue.
And yet another...
Curabitur blandit tempus ardua ridiculus sed magna. Inmensae subtilitatis, obscuris et malesuada fames. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Unam incolunt Belgae, aliam Aquitani, tertiam. Pellentesque habitant morbi tristique senectus et netus. Qui ipsorum lingua Celtae, nostra Galli appellantur.