here is an easy drop in if you need a quick and dirty accordion

sometimes you just need something quick, here is mine for the jquery accordion

also changed the default selected tab to green rather than blue for quick styling.

demo

code

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
<style>
	/* change the default ui color of the active tab */
	.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
	    border: 1px solid rgb(83, 130, 55);
	    background: rgb(104, 171, 63);
	}	
	/* Also you might need to override jquery ui's default font to match your site, otherwise it uses arial. */
	.ui-widget {
	    font-family:'Nunito', Arial, Helvetica, sans-serif;
	}		
</style>

<div id="accordion">
	<h3>title</h3>
	<div>content</div>
	<h3>title</h3>
	<div>content</div>
	<h3>title</h3>
	<div>content</div>
	<h3>title</h3>
	<div>content</div>
	<h3>title</h3>
	<div>content</div>
</div>

Disable auto height and collapse all by default

these are the settings i usually use for the accordion:

$( ".accordion" ).accordion({
	active: false,
	collapsible: true,
	autoHeight: false,
	heightStyle: "content"
});

links