Wrap Toggle for Multiple Elements

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;}