切换多个jQuery图标

Question

I'm having a few problems with my icon toggling in jQuery.

The html for each toggled section is:

<h2 class="collapse"><span class="ui-icon ui-icon-triangle-1-e"></span>Section 1.1</h2>
<p>Hidden text.</p>

And the javaScript:

jQuery(document).ready(function () {
    $(".collapse").click(function () {
        $(this).next().toggle();
        $("span").toggleClass("ui-icon-triangle-1-s");
    }).next().hide();
});

JSfiddle also here .

When I click any of the collapsible sections, all of the icons change at once, though not all of them expand/collapse.

I also can't get my icon to be on the same line as the text, though that's a smaller problem.

Answer 1

You are targeting all span elements.you need to only target the child span element of clicked h2 element:

jQuery(document).ready(function () {
$(".collapse").click(function () {
    $(this).next().toggle();
    $(this).find('span').toggleClass("ui-icon-triangle-1-s");
}).next().hide();
});

and for aligning the icon set style float to left :

 .ui-icon-triangle-1-e{float:left;}

Working Demo

Answer 2

There you go : http://jsfiddle.net/gy653bpL/15/ .

add some CSS :

.collapse span {display:inline-block;}

toogle only the active span :

$(this).find("span").toggleClass("ui-icon-triangle-1-s");