Description:- The counter is incrementing continuously on slide toggle. It is providing a continuous number to the li outside of ol. The issue is appearing in Chrome, but it works fine in Mozilla. What could be the solution for this?
I have included the output file at the bottom.
<ol class="nav">
<li>
<a href="#">Parent-1</a>
<ol class="nav">
<li>child1</li>
<li>child2</li>
</ol>
</li>
<li><a href="#">parent-2</a>
<ol class="nav">
<li>
<a href="#">child-1</a>
<ol class="nav">
<li><a href="#">inner-most-1</a></li>
<li><a href="#">innner-most-2</a></li>
</ol>
</li>
<li><a href="#">child-2</a></li>
</ol>
</li>
<li><a href="#">parent-3</a></li>
</ol>
Jquery
$(function() {
$(".nav ol").hide();
$(".nav > li > a").click(function(e) {
$(this).siblings("ol").slideToggle();
e.preventDefault();
});
});
CSS:-
ol{
counter-reset: section;
list-style-type: none;
}
ol li{
counter-increment: section;
}
ol li:before {
content: counters(section,".") " ";
}
JS_Fiddle:- Link to JSFiddle