Переключение класса span в заголовке бас-гиганта jQuery

Question

Вкратце, чтобы сделать заголовок аккордеона интуитивным, я хочу добавить расширение/свернуть в крайнее правое положение аккордеонной головки, чтобы при активном изменении оно изменилось на «свернуть» из первоначально обозначен как «expand», и я надеюсь сделать это для каждого отдельного заголовка.

Я прорыл множество примеров и перепутал с jsFiddle. Я считаю, что «id» - это проблема, и javascript попадает в многочисленные n-ые клики. В некоторых случаях «span» становится перевернутым, а в других случаях ничего не происходит, или все заголовки аккордеона меняются.

По-прежнему новичок в jQuery и javascript, я торгую с этой проблемой в течение нескольких недель. Кто-нибудь захочет дать мне удар в правильном направлении?

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

Вы хотите использовать jQuery accordion API, таким образом, что он не привязан щелкать, но фактическое переключение аккордеона.

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

Вы обобщенно переключая все пролеты, на основе щелчку первого заголовка элемент. Вы должны быть в состоянии решать переключая их всех с этим:

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

Вот Fiddle

родовым прикрепить событие ко всем заголовкам, попробуйте следующее:

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

Вот Fiddle

Answer 3

Если я правильно понимаю вас, вы можете просто использовать общий класс и $(this):

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

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

Answer 4

Как насчет чистого раствора CSS? 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; 
} 

Примечание: Я просто добавил классы размаху в первом h3. Вы можете добавить все остальное.