Foldable

Single

Simple toggle functionality, using classnames as selectors and applying some built-in animations.


    
        
        
            
                And I'm the target :)

const foldable = new Foldable('#single', {
    animation: {
        enter    : 'foldable-anim--slide-in',
        leave    : 'foldable-anim--slide-out',
        duration : 300
    }
})

Result

And I'm the target :)

Multiple

Multiple toggle functionality by groups. Each group open itself independently setting accordion: false option.
This time we are going to call the plugin using the jQuery format.


    
        
        
            
                I'm the target of the group 1
            
        
    
    
        
        
            
                I'm the target of the group 2

$('#multiple').foldable({
    accordion : false
})

Result

I'm the target of the group 1

I'm the target of the group 2

I'm the target of the group 3

I'm the target of the group 4

I'm the target of the group 5

Nested

Foldable automatically detects children groups combining them and creating nested accordions. You can nest infinite number of accordions!
Just respect the structure '[data-foldable-group] > [data-foldable-trigger] ~ [data-foldable-target]'

We've also set the slide in/out animation.



    
        
        
            
            
                
                
                    
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, neque?

$('#nested').foldable({
    animation: {
        enter    : 'foldable-anim--slide-in',
        leave    : 'foldable-anim--slide-out',
        duration : 300
    }
})

Result

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quibusdam ea numquam voluptates inventore id iste suscipit optio esse quae maiores blanditiis sapiente expedita incidunt autem necessitatibus provident deserunt, eius sequi natus ad vitae, nobis quos modi. Laborum cum nostrum dolor minima, sequi eum itaque illum veritatis et, vitae odio.

Hash

Update URL hash toggling the accordion activating hash: true option.
Also, set data-foldable-hash="your-hash" or href="#your-hash" to a trigger to allow Foldable to know which hash name has to assign to the URL.
If you choose href attribute to use the hash, remember to add # just before the hash name!


    
        
        
            
                I'm the target of the group 1
            
        
    
    
        
        
            
                I'm the target of the group 2
            
        
    
    
        
        
            
                I'm the target of the group 3

$('#hash').foldable({
    hash: true
})

Result

I'm the target of the group 1

I'm the target of the group 2

I'm the target of the group 3

The full stack CSS3 powered jQuery Accordion

Examples

Single

Multiple

Nested

Hash