Stylish Accordion JQuery menu widget for blogger

You can make accordion widget with only css and javascript but the module here is developed to apply every synthesis for individual content with distinct title tag. The tabs hold two different modes Active and Normal and every mode is designed width distinct stylesheet for significant outlined the widget. Accordion can function on WordPress, Blogger and any other HTML based website. Easy to customize and migrate to any location of your website.It needs two advanced version of jQuery and a sort of CSS3 coding which are also easy to customize.This is created by jqueryui.com and here i represent it

Install Table of Content Widget on Blogger

1. Go to Blogger > Template
2. Backup Your Template
3. Now search for the following code

]]></b:skin> 

4. Simply add the following code just above it

/* Layout helpers
----------------------------------*/
.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    position: relative;
    margin-top: 2px;
    padding: .5em .5em .5em .7em;
    min-height: 0; /* support: IE7 */
}
.ui-accordion .ui-accordion-icons {
    padding-left: 2.2em;
}
.ui-accordion .ui-accordion-noicons {
    padding-left: .7em;
}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
    padding-left: 2.2em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
    border-top: 0;
    overflow: auto;
}

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 13px;
}
.ui-widget .ui-widget {
    font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: Verdana,Arial,sans-serif;
    font-size: 13px;
}
.ui-widget-content {
    border: 1px solid #eaeaea;
    background: #ffffff;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top,  #888,  #575757);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
    font-weight: normal;
    color: #fff;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
    color: #555555;
    text-decoration: none;
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
    color: #212121;
    text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: 2px solid white !important;
background: #1C8DFF;
background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
    font-weight: normal;
color: #fef4e9;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #212121;
    text-decoration: none;
}

/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-top-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-top-right-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-bottom-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 4px;
}

Don't save your template right now
5. Search for </head>
6. Now copy following code and paste right before </head> tag

    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    <script>
    $(function() {
        $( "#accordion" ).accordion();
    });
    </script>

7. Now save your template and half of the task done!

Add The jQuery Accordion Widget on Your Template

You can add this accordion widget anywhere of your template either on static page or sidebar, footer section etc.

To add the widget on sidebar please do following

Go to Layout section > Click Add a Gadget > Search for HTML/JavaScript > Now copy following code and paste it > Add your widget sidebar, footer or anywhere your desired location

<div id="accordion">
    <h3>Section 1</h3>
    <div>

YOUR CONTENT GOES HERE

    </div>
    <h3>Section 2</h3>
    <div>

YOUR CONTENT GOES HERE

    </div>
    <h3>Section 3</h3>
    <div>

YOUR CONTENT GOES HERE

    </div>
    <h3>Section 4</h3>
    <div>

YOUR CONTENT GOES HERE

    </div>
</div>

Add Amazing Accordion menu for videos/audio playlist Or Blockquote

A few days ago i developed this Accordion menu for my blog to represent the youtube Video playlist. And i want to share this with you, I hope this is more helpful for you rather than all, in this you can add video (DEMO) or Quote option (DEMO). And you can easily customize this according to their blog or website and WordPress.

  

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
    $('li.title a').click(function(e){
        var dropDown = $(this).parent().next();
        $('.downlistie').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        e.preventDefault();
    })
});</script>
<style>
ul.container{
    width:275px;
    padding:5px;
}
li.accoi-menu{
list-style:none;
    padding:1px;
    width:700px;}

li.title
{
  border-radius: 5px;
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
  /* background: #333333; */
  background: rgba(229, 221, 221, 0.71) url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;
  _background-image: none;
  /* border-color: #D1D1D1; */
  border: solid 1px #D1D1D1;
  list-style: none;
  padding: 5px;
}
li.title a{
color:#333333;
    display:block;
 padding:5px;
    font:16px georgia, verdana;
    overflow:hidden;
        position:relative;
    width:100%;
     text-decoration:none;
}
.downlistie{
list-style:none;
    display:none;
    padding-top:5px;
    width:100%;
}
.downlistie li{
   list-style:none;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
border-radius:5px;
    margin:5px ;
    padding:4px 10px;
  width: 640px;  
}

.downlistie li:hover {
background:rgba(234, 234, 234, 0.47);
}
.downlistie li a{
{
font:14px georgia, verdana;
text-decoration:none;
color:#333333;
}
.downlistie li a:hover {
text-decoration:none;
color:#333333;
}
</style>

For Video Playlist

<ul class="container">
   <li class="accoi-menu">
      <ul>
<li class="title"><a href="#"></a></li>
<li class="downlistie">
           <ul>
      <li><iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/Youtube link?showinfo=0"width="640"></iframe></li>
           </ul>
</li>
      </ul>
    </li>

   <li class="accoi-menu">
      <ul>
<li class="title"><a href="#"></a></li>
<li class="downlistie">
           <ul>
      <li><iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/
Youtube link?showinfo=0"width="640"></iframe></li>
           </ul>
</li>
      </ul>
    </li>
</ul>

For Links and Quote

<ul class="container">
   <li class="accoi-menu">
      <ul>
<li class="title"><a href="#"></a></li>
<li class="downlistie">
           <ul>
      <li><quote>For Quote</quote></li>
           </ul>
</li>
      </ul>
    </li>   <li class="accoi-menu">
      <ul>
<li class="title"><a href="#"></a></li>
<li class="downlistie">
           <ul>
      <li><a href="www.cmpfun.blogspot.com">For links</a></li>
           </ul>
</li>
      </ul>
    </li>
</ul>