Mar 13, 2011

Simplest Accordion jquery independent of your HTML

Sample HTML That you can write (optional you can write your own):
Just follow the structure.

<div class="prod_cat"><span class="icon">Surgical</span>
<ul class="cat_list">
<li>Jaconet Sheeting</li>
<li>Shishumat</li>
<li>Shishu Suvidha</li>
<li>Elastic Sheets</li>
<li>Impression & Anti Static</li>
<li>SheetsVishranti - P.S.P. Waterbed</li>
</ul>
</div>
<div class="prod_cat"><span class="icon">Commercial</span>
<ul class="cat_list">
<li>Jaconet Sheeting</li>
<li>Shishumat</li>
<li>Shishu Suvidha</li>
<li>Elastic Sheets</li>
<li>Impression & Anti Static</li>
<li>SheetsVishranti - P.S.P. Waterbed</li>
</ul>
</div>
<div class="prod_cat"><span class="icon">Technical Fabrics and Rubber Sheets</span>
<ul class="cat_list">
<li>Jaconet Sheeting</li>
<li>Shishumat</li>
<li>Shishu Suvidha</li>
<li>Elastic Sheets</li>
<li>Impression & Anti Static</li>
<li>SheetsVishranti - P.S.P. Waterbed</li>
</ul>
</div>

JQuery You need to Write in your <head> Section:

<script type="text/javascript">
$(document).ready(function() { 
  $('.prod_cat').click(function() {
    if($(this).children('ul.cat_list').is(":visible"))
{
$('ul.cat_list').slideUp('fast');
}
else
{
$('ul.cat_list').slideUp('fast');
$(this).children('ul.cat_list').slideDown('fast');
}
  });
});
</script>


Well you can always change the classes and call the custom selectors from JS.

No comments:

Post a Comment

Test post after a long time

i want to see the post