How To Modify And Install Hover Accordion Menu

♥ ASSALAMUALAIKUM ♥

Since last month I noticed many user's of hover accordion having trouble.The gadgets did not work as usual..Then Finally I found the answer.So for those already have this gadget on their page but not working..

You may just adding the code below after </style> on your previously coding.There's No need to change anything or reapply the codes,ok..Just Add!!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

And for those not install this yet and you interested to install it on your blog..Here How You do it..

Click Dasboard > Layout (Design) > Click Add a Gadget > CLICK HTML / Javascript.

  Copy And Paste: Place the code below  on the  box, then click Save (SAVE).

<style type="text/css">
    h5 {
    font-family: Berlin sans FB;
    font-size: 13px;
    padding: 0 0 1em;
    font-weight:bold;
    color: #ffffff;
    }
    .msg_list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    }
    .msg_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    border:2px solid #ffffff;
    background-color:#ff54a7;
    margin:10px 0;
    -moz-border-radius: 35px;
    border-radius: 35px;
    }
    .msg_body {
    padding: 5px 10px 15px;
    background-color:transparent;
    }
    </style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <script type="text/javascript" src="http://pinkdiva.googlecode.com/files/ddaccordion.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    //hide the all of the element with class msg_body
    $(".msg_body").hide();
    //slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
    $("#firstpane h5.msg_head").click(function()
    {
    $(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
    });
    //slides the element with class "msg_body" when mouse is over the paragraph
    $("#secondpane h5.msg_head").mouseover(function()
    {
    $(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
    });
    });
    </script>
    <div class="msg_list" id="secondpane">
<h5 class="msg_head"> Title 1 </ H5>
<div class="msg_body">
<center>
Content here </ div>
<h5 class="msg_head"> Title 2 </ H5>
<div class="msg_body">
Content here
</ div>
<h5 class="msg_head"> Title 3 </ H5>
<div class="msg_body">
Content here
    </div>
    </div>

You’re Done ..

Note :

✿ # ffffff: color of your text; font-family : Type Of Your Font ; font-size : Size of your text Click Here

✿✿ #ff54a7 - color background of tab title.

✿✿✿ #fad7e8 - Color of background body of the tab..Or should just placed transparent.

✿✿✿✿ 2px solid #ffffff - Change the border size,Border Type And Border Color

✿✿✿✿✿ Title 1,2,3  - Title of your tab

✿✿✿✿✿✿ Content Here -HTML codes you want

If you want to add another tab, just add  the code below before </div>.

<h5 class="msg_head"> Title </ h5>
<div class="msg_body">

Enter codes here.

That's it..Goodluck!!!

Sharing The Love :)