Toggling a span class within a jQuery accordion header

Question

In brevity, to make an accordion header intuitive, I want to append an expand / collapse to the far right of the accordion head such that when active it will alter to "collapse" from initially labeled as "expand", and I am hoping to do this for each individual header.

I've dug through numerous examples and messed around with jsFiddle. I believe "id's" are the issue, and the javascript gets caught up in numerous nth clicks. In some instances the "span" becomes flipped, and in other instances either nothing happens, or all accordion headers become altered.

Still a novice in jQuery and javascript, I've been haggling with this problem for nearly weeks. Would anyone be willing to give me a bump in the right direction?

HTML:

<div id="accordion">

<h3>
    <a class="accordion_header_1" href="#">
        Headline 1
        <span style="float:right;">Expand</span>  
        <span style="float:right;display:none;">Collapse</span>
    </a>
</h3>
    <div>Blah blah blah</div>

<h3>
    <a class="accordion_header_2" href="#">
        Headline 2
        <span style="float:right;">Expand</span> 
        <span style="float:right;display:none;">Collapse</span>
    </a>
</h3>
    <div>Blah blah blah</div>

<h3>
    <a class="accordion_header_3" href="#">
        Headline 3
        <span style="float:right;">Expand</span> 
        <span style="float:right;display:none;">Collapse</span>
    </a>
</h3>
    <div>Blah blah blah</div>

</div>

Javascript:

jQuery().ready(function() { 
    jQuery( "#accordion" ).accordion({ 
        header: "h3", collapsible: true, active: false, heightStyle: "content", navigation: true     
    }); 
});

$(".accordion_header_1").click(function() {
    $("span").toggle();
});

Fiddle: http://jsfiddle.net/79HeD/1/

Answer 1

You want to use the jQuery accordion API, such that it is not tied to click but actual toggle of accordion.

jQuery().ready(function () {
    jQuery("#accordion").accordion({
        header: "h3",
        collapsible: true,
        active: false,
        heightStyle: "content",
        navigation: true,
        activate: function( event, ui ) {
            ui.newHeader.find('span').toggle();
            ui.oldHeader.find('span').toggle();
        }
    });
});

fiddle

Answer 2

You are generically toggling all spans, based on the click of the first header element. You should be able to address toggling them all with this:

$('.accordion_header_1').click(function () {
    $(this).children('span').toggle();
});

Here is a Fiddle

To generically attach the event to all headers, try this:

$('.ui-accordion-header').children('a').click(function () {
    $(this).children('span').toggle();
});

Here is a Fiddle

Answer 3

If I'm understanding you correctly, you can simply use a common class and $(this):

http://jsfiddle.net/isherwood/79HeD/5/

$(".accordion").click(function () {
    $(this).children("span").toggle();
});

Answer 4

How about a pure css solution? HERE

<h3>
    <a class="accordion_header_1" href="#">
        Headline 1
        <span class="spanexpand" style="float:right;">Expand</span>  
        <span class="spancollapse" style="float:right;display:none;">Collapse</span>
    </a>
</h3>

.ui-state-active > a .spancollapse{
display:block !important;
}
.ui-state-active > a .spanexpand{
display:none !important;
}

NOTE: I just added classes to the span in first h3. You can add the rest.