Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.
Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.

JQuery Accordion – Expand Collapse All

I looked over many threads and posts on many sites and wasn’t able to find code that worked for me.    Some of it would be close.   Others buggy.   Below I’ve outlined the JQuery code that worked perfectly for my needs and I hope you find it helpful too.

This example was deployed to a SharePoint page so the “/_layouts/images/plus.gif” was used to leverage the OOTB graphics for a plus/minus icon feel.

Full Example Source Download     (accordion.zip  73KB)

 

image

 

image

 

Parent .HTML

Expand All

First Header

first body

Second Header

second body

Third Header

third body

Supporting .JS

// bind to accordion object
$(document).ready(function(){
	$('#container').accordion({
		header: “h3?
	});
});

// actions taken upon clicking the expand all (collapse all) link
$('#container #expand').click( function() {
	// if link was expand then show and toggle text
	var currHTML = $('#container #expand').html();
	if (currHTML.indexOf(“Expand All”)>0) {
		$('#container .section').slideDown();
		$('#container #expand').html(“
Collapse All”); } else { // if link was collapse then hide and toggle text $('#container .section').slideUp(); $('#container .section').each(function(i){ if (i==0) $(this).slideDown(); }); $('#container #expand').html(“
Expand All”); } });

© Copyright 2016
@ SPJeff

Return to Top ▲Return to Top ▲