Blogger Ever

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

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

See the Pen Nested Accordion Menu by Mohammad Hamza Dhamiya (@mohammadhamza) on CodePen
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.

Holla done !
If you didn't get any point then our comments are open.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.