How to create a nested nested Jquery accordion menu and how to add in Blogger?

Accordion menu is an space saving element that helps to create FAQs and long listed content.The menu is a bit animated and a bit customized.However it is easy to create it with Jquery.In this post I'll describe how to create a nested Jquery accordion menu and how to add that menu in Blogger (blogging platform).With some tips to use,so lets begin.

Demo

Hope you've seen the demo above,clicking on headings opens a section that contain a bunch of information and in that content one more heading on click it also opens one more container,that is what we call a nested accordion menu.

`HTML`

<div class='toggle'>
<h2>Heading</h2>
<div class='comment'>This is a comment by Mohammad Hamza,the author of <a href='http://bloggerever.com' target='_blank'>Bloggerever</a>
<div class='toggle'>
<h2>Heading</h2>
<div class='comment'>This is a another content</div>
</div>
</div>

According to above markup,div with class toggle have a heading in a h2 tag,just after heading their is a div with class='comment'.The div with class='comment' is the content container while h2 heading is the trigger.Every div with class='toggle' have heading and a div with class='comment' which actually works like a event handler.

`Jquery`

$('.toggle').find('.comment').slideUp();
$('.toggle').find('h2').click(function(){
$(this).next('.comment').slideToggle(100);
$(this).toggleClass('selected');
});

First event comes up when the dom is ready,then the second function trigger when the h2 tag is a div with class='toggle' is clicked.The function slides down the div with class='comment' which is next to the event handler (that is heading) and also add a class in heading that is selected.Because of the slideToggle it slideDown on first click and slideUp on second click,same goes with class='selected'.When the first click occur it add a class and when the second time it is clicked,it removes the class.This toggle of class='selected' helps to customize the open and the closed container.

`CSS`

h2
{
font-weight:400;
color:#00bfff;
margin:0;
padding:10px;
cursor:pointer;
}
.selected
{
background:#333;
}
.comment
{
background:#f7f7f7;
padding:10px;
border:1px solid #333;
}

This above bit customization snippet will give a small touch in it.

How to integrate it in Blogger

It is easy just follow the steps below.

Go to template > Edit HTML
If you have already added Jquery library in your template then leave this otherwise add the following line just after <head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'/>

Now below steps must be followed by everyone.
Find </head> and paste the following code just above it.

<script>
$(document).ready(function(){
$('.toggle').find('.comment').slideUp();
$('.toggle').find('h2').click(function(){
$(this).next('.comment').slideToggle(100);
$(this).toggleClass('selected');
});
});
</script>

Find ]]></b:skin>
Paste the following script just above it.

.toggle h2
{
font-weight:400;
color:#00bfff;
margin:0;
padding:10px;
cursor:pointer;
}
.toggle h2.selected
{
background:#333;
}
.comment
{
background:#f7f7f7;
padding:10px;
border:1px solid #333;
}

Save template.
Go to layout > Add gadget > HTML/Javascript.
Add the following script in it and follow the steps.

<div class='toggle'>
<h2>Heading</h2>
<div class='comment'>This is content</div>
</div>

Replace Heading with your desire heading and This is content with your content.If you will paste the following script one more time,another heading will be generated,add the following script according to your needs.If you want to make it nested then just add the above script just before the last </div> of its parent element.

Widget:Superb Jquery Social widget v5 Multi tab style for Blogger

Holla done !

If you didn't get any point then our comments are open.