Html
<ul class="main">
<li class="item_no">Item 1
<ul class="sub_items">
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
</ul>
</li>
<li class="item_no">Item 2
<ul class="sub_items">
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
</ul>
</li>
<li class="item_no">Item 3</li>
</ul>
css
ul.main {
list-style-type:none;
}
ul.main li.item_no {
list-style-image:url('arrow.png');
}
ul.main ul.sub_items li {
list-style-image:none;
}
script
$(document).ready(function() {
$('ul.sub_items').hide().filter(':lt(1)').show();
$("li.item_no").click(function() {
$(this).find(".sub_items").slideToggle("slow");
});
});
If the "item_no" is clicked, I want to switch the list-style-image from "arrow.png" to "arrowdown.png".
Does anyone have a solution for this request?