CODEWITHSUNDEEP
jqueryprepend
Colton Allen
Colton Allen

Reputation: 3060

Using jQuery to change prepends

My jQuery so far:

jQuery(document).ready(function($) {

    $(".spoiler").hide();
    $(".spoiler-title").prepend('+ ');

    $('.spoiler-title').bind('click', function(){
        $(".spoiler-title").prepend('- ');
        $('.spoiler').animate({height: 'toggle'}, 100);

    });

});

So obviously its wrong because every time you click its just going to add a '- ' and it doesn't remove the old '+ ' prepend. So how would you remove that new prepend and return it back to the original '+ '?

Thanks for your help!

Upvotes: 0

Views: 162

Answers (3)

Wes Cossick
Wes Cossick

Reputation: 2933

Try this:

jQuery(document).ready(function($) {

    $(".spoiler").hide();
    $(".spoiler-title").prepend('<span class="prependedSign plus">+ </span>');

    $('.spoiler-title').bind('click', function(){
        if($(".prependedSign").hasClass("minus"))
        {
            $(".prependedSign").remove();
            $(".spoiler-title").prepend('<span class="prependedSign plus">+ </span>');
        }
        else
        {
            $(".prependedSign").remove();
            $(".spoiler-title").prepend('<span class="prependedSign minus">- </span>');
        }
        $('.spoiler').animate({height: 'toggle'}, 100);

    });

});

Upvotes: 1

rafaelbiten
rafaelbiten

Reputation: 6240

PYou may keep using prepend but since the content of that span will be eather a + or a -, you can use something like $('.spoiler-title span').text('+ '); and than change it with .text('- ').

Please consider this code and make the changes as needed:

(function($){ $(function(){
  $('.spoiler-title').click(function(){
    $(this).toggleClass('minus').next('.content').slideToggle();
    if($(this).hasClass('minus')){
      $(this).children().text('- ');
    } else { $(this).children().text('+ '); }
  });
}); })(jQuery);

I don't know what you have there, but here is a working fiddle, so you can see how I did it. Hope it works for you! Also notice that I'm not using $(document).ready(). This change has no effect over the code but it will work the same way and it's "conflict free", so start using it instead. There are other ways to avoid "$" conflicts, but this is the one I personally use.

Upvotes: 1

Kanishka Panamaldeniya
Kanishka Panamaldeniya

Reputation: 17586

try this

jQuery(document).ready(function($) {

        $(".spoiler-title").text('+ ');
        $(".spoiler").hide();

        $('.spoiler-title').bind('click', function(){

             if($(this).text().indexOf("- ") > -1)
             {
                   $(this).text('+ ');
                   $(".spoiler").hide();
             }
             else
             {
                  $(this).text('- ');
                  $(".spoiler").animate({height: 'toggle'}, 100);              
             }

        });

    });

Upvotes: 0

Related Questions