Jquery: Responsive Flat Accordion Navigation

Jquery Accordion Menu
The Accordion Menu comes with multi-levels dropdowns and media query ( Responsive ) for decreasing the size on smaller screens. click event will open the Content and will be closed once user again click on the heading, The Accordion drop down, is managed by the easing effect of the javascript library, jQuery and uses icons FontAwesome. Accordion menu allows you multiple Links or panels to be contained within a single div element. if you are using an older version then please before following tutorial remove the complete code of the older version of accordion menu from your template and then follow the steps below.
Live Preview

Accordion Menu Features

  • Elegant Flat Design.
  • FontAwesome Icons .
  • 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.

Setup font-awesome, accordion script and jquery into your blog


Setting up Font Awesome can be as simple as adding two lines of code to your website, or you can be a pro and customize the LESS yourself!
  1. Go to your Blogger Dashboard >> Template
  2. Click Edit HTML
  3. Paste the following code right after opening <head> tag(Need Help?)
    <!-- Jquery -->
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'> </script>
    <!--Font and iconic Font -->
    <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>
    <link href="http://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet" type="text/css"/>

  4. Paste the following code right before closing </body> tag(Need Help?)
    5. <!-- Accordion -->

    <script type='text/javascript'>

    $(document).ready(function(){

        //ACCORDION BUTTON ACTION
    $(&#39;div.accordionButton&#39;).click(function() {
        //IF THE DIV YOU CLICKED IS ALREADY OPEN, CLOSE AND REMOVE THE OPEN CLASS
        if ($(this).next().hasClass(&#39;openDiv&#39;)) {
            $(&#39;div.accordionContent.openDiv&#39;).slideUp(&#39;2000&#39;);
            $(&#39;div.accordionContent.openDiv&#39;).removeClass(&#39;openDiv&#39;);
        }
           //CLOSE ANY OPEN DIVS, OPEN THE CLICKED DIV
        else {
            $(&#39;div.accordionContent.openDiv&#39;).slideUp(&#39;2000&#39;);
            $(&#39;div.accordionContent.openDiv&#39;).removeClass(&#39;openDiv&#39;);
            $(this).next().slideDown (&#39;1000&#39;);
            $(this).next().addClass(&#39;openDiv&#39;);
        }
    });
    //HIDE THE DIVS ON PAGE LOAD
    $(&quot;div.accordionContent&quot;).hide();
    });

    </script>


Note:-if You already using jquery and font-awesome then please skip the jquery and font-awesome link from the below code and then continue the steps below and if you wish to use another font or your template default font then please skip the "lato font" link from the code below.

Adding CSS

  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: auto;

        font-family: 'lato', sans-serif;
        font-weight: normal;
        margin-right: auto;
        margin-left: auto;
    }

    .accordionButton {
        width: 100%;
        float: left;
        background: #1FDEA0;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        cursor: pointer;
        padding: 10px 10px;
        line-height: 30px;
    }

    .accordionButton:before {
        font-family: 'FontAwesome';
        content: "\f0a9";
        font-size: 18px;
        margin-right: 10px;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        -webkit-font-smoothing: antialiased;
    }

    .accordionButton:hover:before {
        font-family: 'FontAwesome';
        font-size: 18px;
        font-weight: normal;
        font-variant: normal;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .4s ease;
    }

    .accordionContent {
        width: 100%;
        float: left;
        background-color: #FFF;
        font-size: 12px;
        display: none;
        padding: 0px;
        margin: 0 auto;
    }

    .accordionContent ul {
        float: left;
        width: 100%;
        margin: 0 auto;
        padding: 0px;
        text-decoration: none;
    }

    .accordionContent li {
        border-bottom: 1px solid #ddd;
        list-style: none;
        list-style-image: none;
        margin: 0 auto;
        text-decoration: none;
    }

    .accordionContent li a {
        display: block;
        font-size: 14px;
        font-weight: 400;
        overflow: hidden;
        color: #7D7D7D;
        text-decoration: none;
        margin: 0 auto;
        text-transform: capitalize;
        padding: 10px 0 10px 10px;
    }

    .accordionContent li a:before {
        font-family: FontAwesome;
        content: "\f061";
        margin-right: 3px;
    }

    .accordionContent li a:hover {
        color: #333;
        text-decoration: none;
    }

    .accordionContent li:last-child {
        border-bottom: none;
    }


Now you are just one step away from success just follow the below step and visit 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">Top Blogger widget 2014 </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">Top SEO Articles</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">Top Best Blogger Template  </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">Top Blogger Resources and Tools</div>
            <div class="accordionContent">
                 <ul>
            <li><a  href="#" >HTML Econder</a></li>
                        <li> <a  href="#">HTML Editor</a></li>
                        </ul>
                       
            </div>
            <div class="accordionButton">Flat Blogger Templates</div>
            <div class="accordionContent">
                 <ul>
            <li><a  href="#" >Flat Mag</a></li>
                        <li> <a  href="#">Developer Template</a></li>
                        </ul>                  
          
          <!-- Last DropDown -->
        </div>

How To Setup Accordion Menu Links

  • In the above html code we have created 5 accordion menu.
  • Replace Highlighted in yellow with the name of the dorpdown title.
  • Replace Highlighted in Green with your Link anchor text.
  • Replace hash (#) sign with your article (page) link.
So now you are thinking adding another drop-down into the accordion widget, So then just add the following code after (<!-- Last DropDown –>).

     <div class="accordionButton">Flat Blogger Templates</div>         <div class="accordionContent">              <ul>         <li><a  href="#" >Flat Mag</a></li>                     <li> <a  href="#">Developer Template</a></li>                     </ul>                               </div>

We hope that you will find this tutorial useful and it will help you to create awesome flat accordion menu. Need further help or have questions? Leave them in comments below and don't forget to share, Soon we will share a free premium template until for stay updated by subscribing our newsletter below for free blogger resources in future. Happy Blogging..!!
Author on

3 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. We reserve the rights to remove any comment from the Blog. Please leave comments that are respectful and useful. Comments with spamy links and solely promotional in nature will be deleted immediately upon our review.
  1. nafees14 June 2015 at 01:04

    Very Nice Accordion menu really liked it would love to use it on my new blog! Thanx Mohammad bhai for this amazing menu!

    ReplyDelete
  2. Mahtab3 March 2017 at 14:48

    Thanks for sharing this types of mebu

    ReplyDelete
  3. Mahtab4 March 2017 at 02:37

    but its not show sub menu help me

    ReplyDelete