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("▼");
}