November 18, 2015
I used this with my Fake Archives for Multiple Authors in order to hide the child containers.
jQuery:
REL.init = function() { if (jQuery('.archive').length > 0) { // load drop down function only on Archive pages REL.dropDownInit(); } } REL.dropDownInit = function() { jQuery('#archives_wrap ul li').each(function() { // target date jQuery(this).addClass('drop_down_button'); }); var count = 0; jQuery('.drop_down_button').each(function() { jQuery(this).nextUntil(".drop_down_button").wrapAll('<div class="drop_down_content">'); // wrap all until next class count++; }); jQuery('.drop_down_button').on('click', function() { // trigger show / hide if (jQuery(this).hasClass('expanded')) { jQuery('.drop_down_button').removeClass('expanded'); jQuery('.drop_down_content').hide(); } else { jQuery('.drop_down_button').removeClass('expanded'); jQuery('.drop_down_content').hide(); jQuery(this).addClass('expanded'); jQuery(this).next('.drop_down_content').slideDown('fast'); } }); }
CSS:
.drop_down_content { display: none; margin: .5em 0; } .drop_down_button:hover, .drop_down_button:active {cursor: pointer;} .drop_down_content p {margin: 0 0 .25em;}