Collapsible Menu with Activ-State

[dnnot]

hi everyone,
i`ve been looking now so long for a snippet of a collapsible menu with an active-state (arrow-up/arrow-down) – not an accordion menu, because i want to have more then one list-item open by clicking on the 2-3 available menus.

Its like the “SNIPPETS”-area here on css-tricks only with an active state.
I hope someone can help me, i would be very thankful.

sorry for bad english.

[Taufik Nurrohman]

$(function() {

$('#accordion').children('[data-header]').hide().each(function() {

$(this).before('
' + $(this).data('header') + '
');

}).prev().on("click", function() {

$(this).toggleClass('active').next().slideToggle();

});

});

Content 1


Content 2


Content 3


Content 4


Content 5

Demo: http://jsfiddle.net/tovic/EDQn9/9/

[dnnot]

awesome, thank you!

[dnnot]

hi again,
thanks for the help above – now i got a new problem : (
how i can include a persistence with jquery cookie?

(with expire of as example 7 days)

i will be again very thankful for help!

[agrimsrud]

Have a look at this plugin:
https://github.com/carhartl/jquery-cookie/

[dnnot]

thank you for the help! but sorry i dont get it.

I tried to understand this, spend hours with google.. but nothing helped me.

[Taufik Nurrohman]

Here I use the standard JavaScript Cookie (I think):

$(function() {

$('#accordion').children('[data-header]').hide().each(function() {

$(this).before('
' + $(this).data('header') + '
');

}).prev().each(function(i) {

$(this).on("click", function() {

if ($(this).next().is(':hidden')) {

$(this).addClass('active').next().slideDown();

createCookie('expanded' + i, null, 7); // Create a cookie named 'expanded-N' (N are: 0,1,2,3,blablablah...)

} else {

$(this).removeClass('active').next().slideUp();

eraseCookie('expanded' + i); // Or... delete the saved cookie (toggle)

}

});

// If the cookie named 'expanded-N' successfully read...

if (readCookie('expanded' + i)) {

// Slide down the saved panel session

$(this).addClass('active').next().slideDown();

}

});

});

Click some panel and then reload the page to see that the panel sessions can be stored: http://jsfiddle.net/tovic/EDQn9/12/

Hope this help! :)

[dnnot]

you are awesome, thank you for your great work!
but is it possible to prevent the animation (slideDown-Animation) if I refresh the page?

[Taufik Nurrohman]

Change .slideDown() to .show()

if (readCookie('expanded' + i)) {

// Just show the saved panel session

$(this).addClass('active').next().show();

}

[dnnot]

wow, finally everything works fine – you are my hero. thank you very much!
this community rocks.

[scadole]

Thank you for this tutorial!

I followed it to the tee and I only have 4 expanded boxes with content 1 to 5 listed. The menu isn’t collapsed and the headers are missing.

any ideas?

[Taufik Nurrohman]

@scadole: What version JQuery do you use? The above code, requiring a minimum of version 1.7

[scadole]

Thanks for getting back to me…. 1.7 is the one i’m using. This is what it looks like now, and I can’t figure it out. http://lensspark.com/plays.html

[scadole]

I changed the div h2 tag to an h2 and the content turned into an h2 style (which I didn’t want) but the headers all appeared and the collapsing worked. I changed the h2 tag back to a div and everything the content went back to the way it should have been and the collapsable headers stayed. I have know idea how or why, but certainly glad it worked. Thanks again for all your help. WOOOOHOOOOO!

[Author]

Posts