Jquery: Simple Accordion Menu In Responsive Flat Design

Simple Accordion menu that we released few months ago and as we promise with our readers for the next version of accordion menu, today we are taking Accordion menu to the next Level (Flat Design) accordion menu V2.0. This menu drop down, is managed by the easing of the javascript library, jQuery and uses icons FontAwesome. Flat Accordion menu allows you multiple Links or panels to be contained within a single div element. if you are using an older then please before following tutorial remove the complete code of the older version of accordion menu from your template and then follow the documentation below.

Take a look at our previous Accordion Menu

Features: V 2.0

• Elegant Flat Design.
• FontAwesome Icons Added.
• Jquery Slideup Easing Effect.
• Standard Expand/Collapse functionality.
• Activate/Deactivate on 'click' event.
• The Accordion plugin provides support for unlimited number of levels.
• The plugin could easily be customized and used with any website.

Note: If you find a bug and ugly look, note device and browser versions and please let me know I will try to fix that.

How to add it to blogger blog

1. Locate the </head> tag in the middle of your template.
2.Copy the code below and insert it right above the tag.

<!-- Jquery -->
<script type="text/javascript" src="http://ift.tt/uyExtg"> </script>
<!--Font and iconic Font -->
<link rel="stylesheet" href="http://ift.tt/18QXBAt"/>
<link href='http://ift.tt/STEBkC' rel='stylesheet' type='text/css'/>
<!-- Accordion -->
<script type="text/javascript" src="http://ift.tt/1JkWpoh"</script>

if You already using jquery then remove the jquery script from the above code and then follow the steps below.

Adding CSS In Blogger Template

Before making changes you must backup your blogger template in case of any error.

1. Blogger: Go to Template > Edit HTML.
2. Locate the ]]></b:skin> tag end of the style sheet.
3. Copy the code below and insert it right above the (]]></b:skin>) tag.

#accor-wrap {
    width: 350px;
    font-family:'lato', sans-serif;
    margin-right: auto;
    margin-left: auto;
    }
   
.accordionButton {   
    width: 325px;
    float: left;
    background-color: rgba(0,163,255,1.00);
    font-size: 16px;
    font-weight: normal;
    color: #fff;
    border-bottom: 1px solid #fff;
    cursor: pointer;
    padding: 10px 10px;
    }
.accordionButton :last-child {
   
    border-bottom: none;
    }
   
   
    .accordionButton  span {
    font-size: 15px;
    float:right;
    margin-right: 10px;
    color:#fff;
    display:inline-block;
    }
   
    .accordionButton span:before {
        font-family:'FontAwesome';
        content: "\f0c9";
        font-size: 18px;
        }
   
.accordionContent {   
    width: 345px;
    float: left;
    background-color: rgba(96,180,249,1.70);
    font-size:12px;
    display: none;
    padding: 0px;
    margin: 0 auto;
    }
   
.accordionContent ul {
    float: left;
    width:345px;
    margin:0 auto;
    padding:0px;
    text-decoration:none;
}
.accordionContent li {
    border-bottom: 1px solid #ddd;
    list-style: none;
    list-style-image: none;
    text-decoration: none;
   
}
.accordionContent li:last-child {
    border-bottom:none;
    }
.accordionContent li a {
    display:block;
    font-size:14px;
    font-weight: 400;
    overflow:hidden;
    color:#f1f1f1;
    text-decoration:none;
    margin: 0 auto;
    margin-bottom: 1px;
    text-transform:capitalize;
    padding:10px 0 10px 10px;
        }
       
    .accordionContent li a:before{
        font-family: FontAwesome;
        content:"\f178";
        margin-right: 3px;
        }   
.accordionContent li a:hover{
    color: #333;
    text-decoration:none;
    }
   
/* Media Queries */
@media screen and (max-width:320px){
    .container > header{
        text-align: center;
    }
    p.demo-nav {
        position: relative;
        top: auto;
        left: auto;
    }
   
    #accor-wrap {
    width: 300px;
    max-width:300px;
    position: relative;
    }
   
.accordionButton {   
    width: 280px;
    max-width:280px;
    float: none;
    padding: 5px 5px;
    }
.accordionContent {   
    width: 290px;
    float: left;
    display: none;
    margin: 0 auto;
    padding: 0px;
    }
   
.accordionContent ul {
    float: left;
    width:290px;
    margin:0 auto;
    padding:0px;
}
}

Now you are just one step away from success just follow the step below and see flat accordion menu in action.

Adding HTML Into Blogger Layout

1. Go to Layout.
2. Click Add A Gadget.
3. In Add A Gadget window, select HTML/Javascript .
4. Copy the code below and paste it inside the content box.
5. Save the gadget.
6. Drag the gadget and reposition it where you want to show gadget.
7. Click Save button (top right hand corner).

<div id="accor-wrap">
        <div class="accordionButton"><i style="margin-right: 5px;" class="fa fa-circle-o-notch fa-spin"></i>Top Blogger widget 2014<span></span> </div>
        <div class="accordionContent">
        <ul>
        <li><a  href="#" >Floating Sharing Bar</a></li>
                    <li> <a  href="#">Facebook Poput Like Box</a></li>
                    </ul>
        </div>
        <div class="accordionButton"><i style="margin-right: 5px;" class="fa fa-circle-o-notch fa-spin"></i>Top SEO Articles <span></span></div>
        <div class="accordionContent">
        <ul>
        <li ><a  href="#">Search Engines That Respect Privacy
by Guest blogger </a></li>
                    <li> <a  href="#">The SEO Tools That Help Boost Your Sites Traffic </a></li>
                    </ul>
       </div>
        <div class="accordionButton"><i style="margin-right: 5px;" class="fa fa-circle-o-notch fa-spin"></i>Top Best Blogger Template <span></span> </div>
        <div class="accordionContent">
             <ul>
        <li><a  href="#" >Blogger Beginner</a></li>
                    <li> <a  href="#">Premium Blogger Template</a></li>
                    <li> <a  href="#">Sky Blue Blogger Template</a></li>
                    </ul>
        </div>
        <div class="accordionButton"><i style="margin-right: 5px;" class="fa fa-circle-o-notch fa-spin"></i>Top Blogger Resources & Tools <span></span></div>
        <div class="accordionContent">
             <ul>
        <li><a  href="#" >HTML Econder</a></li>
                    <li> <a  href="#">HTML Editor</a></li>
                    </ul>
                   
        </div>
        <div class="accordionButton"><i class="fa fa-circle-o-notch fa-spin" style="margin-right: 5px;"></i>Flat Blogger Templates <span></span></div>
        <div class="accordionContent">
             <ul>
        <li><a  href="#" >Flat Mag</a></li>
                    <li> <a  href="#">Developer Template</a></li>
                    </ul>
                  
        <!-- Last DropDown -->
    </div>

Troubleshooting For Setting Up widget For Your Blog

In the above html code we have created 5 accordion menu.

• Replace Highlighted in yellow with the name of the dorp down title.
• Replace Highlighted in Green with your Link anchor text.
• Replace hash (#) sign with your article (page) link.

So now lovely readers are thinking about adding another dropdown section into the accordion widget, So then just add the following code after (<!-- Last DropDown -->) .

<div class="accordionButton"><i class="fa fa-circle-o-notch fa-spin" style="margin-right: 5px;"></i>here is the title For your new dropdown <span></span></div>
        <div class="accordionContent">
             <ul>
        <li><a  href="#" >here is your anchor text </a></li>
                    <li> <a  href="#">here is your anchor text </a></li>
                    </ul>
        </div>

We hope that you will find this article useful and it will help you create awesome flat accordion menu. Need further help or have any questions? Leave them in comments below and don’t forget to share. Soon we will share a free premium template stay updated for free blogger resources. Happy Blogging..!!

Image credit:- graphicburger