25 Oct 2014

Beautiful Accordion Menu Widget For Blogger

On In ,

5 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='http://code.jquery.com/jquery-1.10.2.min.js' 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="https://anjanadesigns.blogspot.com">Sub Heading 1</a></li>
<li><a href="https://anjanadesigns.blogspot.com">Sub Heading 2</a></li>
<li><a href="https://anjanadesigns.blogspot.com">Sub Heading 3</a></li></ul></li>
<li><h3>Main Heading 2</h3>
<ul><li><a href="https://anjanadesigns.blogspot.com">Sub Heading 4</a></li>
<li><a href="https://anjanadesigns.blogspot.com">Sub Heading 5</a></li>
<li><a href="https://anjanadesigns.blogspot.com">Sub Heading 6</a></li></ul></li>
<li><h3>Main Heading 3</h3>
<ul><li><a href="https://anjanadesigns.blogspot.com">Sub Heading 7</a></li>
<li><a href="https://anjanadesigns.blogspot.com">Sub Heading 8</a></li>
<li><a href="https://anjanadesigns.blogspot.com">Sub Heading 9</a></li></ul></li>
<li><h3>Main Heading 4</h3>
<ul><li><a href="https://anjanadesigns.blogspot.com">Sub Heading 10</a></li>
<li><a href="https://anjanadesigns.blogspot.com">Sub Heading 11</a></li>
<li><a href="https://anjanadesigns.blogspot.com">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(http://4.bp.blogspot.com/-jxfJ5gu2Awo/VEnYYEWxE2I/AAAAAAAAHZ8/B_mVrXyBmN4/s1600/pink.png); background-position:left; background-repeat:no-repeat;} #accordion ul ul {display: none;} #accordion li.active 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>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Important:

To change the color of Accordion, change the values in Pink,
Replace "https://anjanadesigns.blogspot.com" with your link.

5 comments:

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

    Thanks
    Admin - ReviewsToday

    ReplyDelete
  2. Thanks! I use your "accordion" in my blog: http://lassenlinkit.blogspot.fi

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

    ReplyDelete
  4. Thanks for sharing.

    "Accordion" has been applied to the blog http://lbh-ham-apha.blogspot.co.id/

    ReplyDelete

Your comments are always appreciated! However advertisements will not be approved. Thanks.