Toggle div text on click

Question

Here's my jQuery

jQuery(document).ready(function($) {
    $("#accordion").find(".accordion-toggle").click(function(){
        $(this).next().slideToggle("fast");
        $(".accordion-content").not($(this).next()).slideUp("fast");
    });
});

Here's my HTML

<div id="accordion">
    <header class="accordion-toggle">
         <h2>Accordion Title <span id="accordionIcon">▼</span></h2>
    </header>
    <section class="entry accordion-content">
        <p>Accordion Content</p>
    </section>
</div>

Whenever a new accordion-toggle is clicked I need the old accordionIcon to change to the opposite arrow, and the new one to change also. I've tried doing it using $(".accordion-content").not($(this).next()).parent().find('#accordionIcon') but it can't find the correct element

Answer 1

Here's a fiddle . Is this what you are looking for?

This is the code I added.

if($(this).find("span#accordionIcon").text()=="▼"){
    $(this).find("span#accordionIcon").text("▲");
}
else{
    $(this).find("span#accordionIcon").text("▼");
}

Answer 2

Accepted answer will only work with one toggle. Here is the version ( Codepen ), that work with multiple:

HTML

<div id="accordion">
    <header class="accordion-toggle">
         <h2>Accordion Title 1<span>▲</span></h2>
    </header>
    <section class="entry accordion-content">
        <p>Accordion Content</p>
    </section>
    <header class="accordion-toggle">
         <h2>Accordion Title 2<span>▲</span></h2>
    </header>
    <section class="entry accordion-content">
        <p>Accordion Content</p>
    </section>
</div>

JS

jQuery(document).ready(function($) {
    $("#accordion").find(".accordion-toggle").click(function(){
        if ($(this).find('span').text() == '▼') {
          $(this).siblings(".accordion-content").slideUp("fast");
          $(this).siblings(".accordion-toggle").find('span').text('▼');
          $(this).next().slideDown("fast");
          $(this).find('span').text('▲');
        } else {
          $(this).next().slideUp("fast");
          $(this).find('span').text('▼');
        }
    });
});

Answer 3

Or without change your code, you can do like that :

jQuery(document).ready(function($) {
    $("#accordion").find(".accordion-toggle").click(function(){
        var span = $(this).find('span');
        if (span.hasClass('isOpened')) {
            span.removeClass('isOpened').html('▲');
        } else {
            span.addClass('isOpened').html('▼');
        }
        $(this).next().slideToggle("fast");
        $(".accordion-content").not($(this).next()).slideUp("fast");
    });
});

JSFIDDLE

Answer 4

If you want to use font-awesome

 jQuery(document).ready(function($) { $("#accordion").find(".accordion-toggle").click(function(){ $(this).next().slideToggle("fast"); if($(".fa").hasClass("fa-arrow-down")){$(".fa").removeClass("fa-arrow-down").addClass("fa-arrow-up");} else $(".fa").removeClass("fa-arrow-up").addClass("fa-arrow-down"); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <div id="accordion"> <header class="accordion-toggle"> <h2>Accordion Title <i class="fa fa-arrow-down"></i></h2> </header> <section class="entry accordion-content"> <p>Accordion Content</p> </section> </div>

Answer 5

jQuery(document).ready(function($) {      
    $("#accordion").find("a").click(function(){                   

 //'all' triangles returned to initial position, because some of triangle is 
  //up but wich one? User can click any: 
 $("#accordion").find("span.rght").text("▼");       
if($(this).find("span.rght").text()=="▼"){     
$(this).find("span.rght").text("▲");                
}   
//else{$(this).find("span.rght").text("▼");} //sometime does not work!?  
    });    
});    

//see working website: http://evadapter.com/faq.html
 <style>
    .rght{float:right}
</style>

Answer 6

I dropped to use Accordion because a few my customers requested to compare 2 answers, but mostly because of efficiency to use simple HTML5 Details control that I tested for 1000 questions! in a single FAQ page for my new customer's estimate. The issues with the Accordion starts from 140 items, see https://github.com/twbs/bootstrap/issues/26419

Here is simplest and efficient solution with full control and automatic "Collapse All" button appearance and disappearance. If you would like to see the more advanced implementation on the real website: https://airtempheating.com/faq

<details>
<summary>
  Is there any advantage to setting the thermostat fan setting to “On” or “Auto” mode all the time?</summary>
Yes! You will have constant filtering of the air. A second advantage is that the constant airflow will allow an even temperature throughout your home. 
However, if your home feels very humid, set the fan to the “Auto” mode.
</details>
<details>
<summary>
  How long does a typical furnace or air conditioner last?</summary>
New air conditioning and heating equipment lasts longer than ever! The end of a furnace's or air conditioner’s service life depends on more than just chronological age. 
Energy-efficiency issues and the price of any necessary repairs versus the cost of upgrading to a new unit all enter into that determination.
</details> <hr>    
<button type="button" id="hdn" class="btn btn-primary" onClick="window.location.reload();">Collapse All</button>

<style>
#hdn{display:none; visibility:visible}
</style>

<script>
$(function() {$('summary').click(function() {if($('#hdn').css("display") == "none"){$('#hdn').show();}});});
</script>