Question

Is there a way to add a span of a + and – for this code? I’m having a tuff time getting it to work. I’d like it to be in the div when toggling back and forth. This code is working great but every time I alter the code it doesn’t seem to work. :-/

<script>
$(function() {
      $( '.mylisting-trigger' ).click(function() {
      $( '.mylisting-main' ).toggle( 'blind', {direction: 'down'}, 200 );
        return false;
     });
    });
</script>

Here is the HTML I’m using.

<div class="row mylisting">
<div class="twelve columns">
    <div class="mylisting-header">
        <a href="#" class="mylisting-trigger"><h1>my listing</h1><h1><span>(24)</span></h1></a>
    </div><!--/mylisting-header-->
    <div class="mylisting-main">
        <div class="mylisting-options">
            <p>
                <a href="#">Send</a> 
                <a href="#">Rename</a>
                <a href="#">Delete</a>
            </p>
        </div>
            </div><!--/.mylisting-main-->
        </div><!--/twelve columns-->
     </div><!--/row mylisting-->

Answer 1

You can try something like this:

<div class="mylisting-header"> 
    <a href="#" class="mylisting-trigger">
         <span class='show'>- Less</span>
    </a>
</div>

$(function () {
    $('.mylisting-trigger').click(function(e) {
        e.preventDefault();
        $('.mylisting-main').toggle('blind', {direction: 'down'}, function () {
            var $this = $(this);
            $('.show').text(function (i, v) {
                return $this.is(':hidden') ? '+ More' : '- Less';
            })
        });
    });
});

http://jsfiddle.net/nxGfM/