Toggle div text on click

Question

Here is my jQuery

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

Here is 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>

Each time you press the new accordion-toggleone, I need the old one to accordionIconchange to the opposite arrow, and the new one to change too. I tried to do this with $(".accordion-content").not($(this).next()).parent().find('#accordionIcon'), but could not find the correct item

Answer 1

Here's the 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

The accepted answer will work with only one switch. Here is the version ( Codepen ) that work with several:

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

:

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

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>

Hide result

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>