How to change prepended text when toggled in Jquery?

Question

I have some content that I am show/hiding using the Jquery toggle function.

I have prepended an arrow to each heading and would like to change the prepended arrow to a downwards arrow when the content is toggled.

Code so far:

$(document).ready(function(){
    $('.show-hide-list h3 a').prepend('> ');//Prepend arrow
    $('.show-hide-list li .show-hide-list-content').hide();//Hide content
    $('.show-hide-list h3').click(function() {//Perform toggle when clicked
        $(this).next('.show-hide-list-content').toggle();
        //Need to change orientation of prepended arrow when toggled
        return false;
    });
});

The html is as follows:

<ul class="show-hide-list">
<li>
       <h3><a href="#">Heading</a></h3>
   <div class="show-hide-list-content">
           Content to be toggled here.
       </div>
    </li>
 </ul>

How can I change the arrow orientation once toggled?

Answer 1

Wrap your arrow in a span tag so you can easily select it.

$(document).ready(function(){
    $('.show-hide-list h3 a').prepend('<span>&gt;&nbsp;</span>');//Prepend arrow
    $('.show-hide-list li .show-hide-list-content').hide();//Hide content
    $('.show-hide-list h3').click(function() {//Perform toggle when clicked
        $(this).next('.show-hide-list-content').toggle();
        var arrow = $(this).find('span');

        if (arrow.text().indexOf('V') >= 0) {
            arrow.html('&gt;&nbsp;');  
        } else {
            arrow.html('V&nbsp;');
        }
        //Need to change orientation of prepended arrow when toggled
        return false;
    });
}); ​

http://jsfiddle.net/6DB7t/1/

Answer 2

You could apply a class to that arrow, assuming your users' browsers would support it. Start with some some CSS like this:

-webkit-transform: rotate(-270deg); 
-moz-transform: rotate(-270deg);

Or just toggle a downward arrow image's visibility, which would work on any modern browser.

Answer 3

Just put the arrow in a <span> and give it a proper class, so you can find it again later: For example like this:

$(document).ready(function(){

$('.show-hide-list h3 a').prepend('<span class="togglearrow">&gt;&nbsp;</span>');
//Prepend arrow
$('.show-hide-list li .show-hide-list-content').hide();//Hide content
$('.show-hide-list h3').click(function() {//Perform toggle when clicked
    $(this).next('.show-hide-list-content').toggle();

    $(this).parent().find('.togglearrow').html('V ');
    //V represents downward arrow

    //Need to change orientation of prepended arrow when toggled
    return false;
});

});

Answer 4

Instead of using prepend I would recommend using the :before pseduo selector or a background-image to create the arrows. This is a presentational thing so it really should be handled by CSS.

Live, functional example using the :before pseduo selector - http://jsfiddle.net/Nfw7y/

If you need more control over the look of the arrows I would recommend using a background-image or an icon font .

Answer 5

你可以简单地拥有

$('.show-hide-list h3 a').html( $('.show-hide-list h3 a').html().replace('>', 'V') );