Hello Readers

Accordion menu is familiar to all of us.

In this kind of menu, each menu item produces a dropdown menu on click. But when we click on another menu item, the dropdown for other menu items would close by themselves. Such a menu can easily be made with JQuery.

The following code will help you with this.

Creation Accordion menu just requires some simple effects. Menu items when clicked, toggle to open some submenu items, as told above. When another menu item is selected, the previous menu items will automatically close down accordingly. We will be using JQuery to get the animation effect (for dropdown and closing down) and standard CSS to apply some styles.

HTML:

We will used <ul><li> (list) in HTML to create the menu and submenu.

<div class="container">
<div class="l-wizard-v">
	<ul class="wizard-v">
		<li class="wizard-v__step">
			<h3>First Step</h3>
			<p>Step 1 contains of some other steps that can be defined here.</p>
		</li>
		<li class="wizard-v__step">
			<h3>Second Step </h3>
			<p>Feel free to add some more HTML stuff into this div.</p>
		</li>
		<li class="wizard-v__step">
			<h3>Third Step</h3>
			<p>The end is near. Go further to see what happens</p>
		</li>
		<li class="wizard-v__step">
			<h3>Final Step</h3>
		</li>
	</ul>
</div>
</div>

CSS:

Below CSS code I have applied round corner CSS used border-radius property to make looks good.

.container{
	width: 600px;
	margin: auto;
}
.wizard-v {
    background: #f5f5f5 none repeat scroll 0 0;
    list-style-type: none;
    margin: 0 0 30px;
    padding: 20px;
    border: 1px solid #dbdbdb;
}
.wizard-v__step {
    border-bottom: 3px solid #3890bd;
    margin-bottom: 2px;
    position: relative;
}
.wizard-v__step::after, .wizard-v__step::before {
    border: medium solid transparent;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    width: 0;
}
.wizard-v__step::before {
    border-top-color: #3890bd;
    border-width: 20px;
    left: 50%;
    margin-left: -20px;
}
.wizard-v__step::after {
    border-top-color: #f5f5f5;
    border-width: 16px;
    left: 50%;
    margin-left: -16px;
}

JQuery:

$(document).ready(function(){
	$("#accordion > li > div").click(function(){
		if(false == $(this).next().is(':visible')) {
			$('#accordion ul').slideUp(300);
		}
		$(this).next().slideToggle(300);
	});
	//$('#accordion ul:eq(0)').show();
});

Above code

On click, the accordion menu will display the submenu items in a dropdown submenu. And on another click, the dropdown menu will close.

$(this).next().slideToggle(300);

When another menu item is selected than other menu item will automatically closed accordingly

if(false == $(this).next().is(':visible')) {
	$('#accordion ul').slideUp(300);
}

If you want to made the first menu item in accordion menu visible used this code

$('#accordion ul:eq(0)').show();

OUTPUT:

See the live demo at here: https://jsfiddle.net/mani_123/bdtqc3wt/show/

output like this :