Beautiful Accordion Menu Widget For Blogger

In 6 Comments
Accordion is a musical instrument which can be played by compressing or expanding a hand-held bellows. Likewise, the Accordion interface is a stacked list of items in which each item can be expanded and collapsed.

jquery accordion menu widget

Here I'm presenting you the code for creating a pretty Accordion widget for your Blog. First you need to make sure that Jquery is added to your template.

Navigate to your Blog's Dashboard --> Template --> Edit HTML.
Press Ctrl+F and search for <head>.
Add the below code under <head> and save the template.

<script src='' type='text/javascript'/>

Now access Layout from the left menu and click Add a Gadget.
Select HTML/Javascript.
Copy and paste the following code. You can put a title if you want and click Save.
<div id="accordion"><ul><li><h3>Main Heading 1</h3>
<ul><li><a href="">Sub Heading 1</a></li>
<li><a href="">Sub Heading 2</a></li>
<li><a href="">Sub Heading 3</a></li></ul></li>
<li><h3>Main Heading 2</h3>
<ul><li><a href="">Sub Heading 4</a></li>
<li><a href="">Sub Heading 5</a></li>
<li><a href="">Sub Heading 6</a></li></ul></li>
<li><h3>Main Heading 3</h3>
<ul><li><a href="">Sub Heading 7</a></li>
<li><a href="">Sub Heading 8</a></li>
<li><a href="">Sub Heading 9</a></li></ul></li>
<li><h3>Main Heading 4</h3>
<ul><li><a href="">Sub Heading 10</a></li>
<li><a href="">Sub Heading 11</a></li>
<li><a href="">Sub Heading 12</a></li></ul></li></ul></div>

<style type="text/css">#accordion {margin: 0;padding:0; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #fff; width: 250px;} #accordion h3 {font: 15px Arial; padding: 9px; color:#fff; cursor: pointer; background:#FF0080 border-bottom:1px solid #fff;} #accordion li {list-style-type: none; padding:0; margin:0; background-color:#f4f4f4;} #accordion ul ul li a {border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd; color: #3b3b3b; text-decoration: none; font: 12px Verdana; display: block; padding: 8px 0 8px 8px;} #accordion ul ul li a:hover {padding-left:15px; background-image:url(; background-position:left; background-repeat:no-repeat;} #accordion ul ul {display: none;} #accordion ul {display: block;} #accordion ul{list-style:none; margin:0; padding:0;}</style>

<script>$(document).ready(function() { $("#accordion h3").click(function(){$("#accordion ul ul").slideUp(); if(!$(this).next().is(":visible")) {$(this).next().slideDown();}})})</script>


To change the color of Accordion, change the values in Pink,
Replace "" with your link.


  1. This is truly helpful. Keep sharing more details.

    Admin - ReviewsToday

  2. Thanks! I use your "accordion" in my blog:

  3. Thank you for the code.
    It would be very helpful if you add a demo blog for widgets.

  4. Thanks for sharing.

    "Accordion" has been applied to the blog

  5. I will use it. Thaks for sharing