jquery accordion

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

title

content

title

content

title

content

title

content

title

content

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

jqueryui accordion

Demo

Other Items in js
Page Views

This page has been viewed 85 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹