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.
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