CODEWITHSUNDEEP
javascriptjquery
Uncle Kracker
Uncle Kracker

Reputation: 45

Remove class add class issue

Hey guys I have this jQuery content toggle setup here: http://jsfiddle.net/DTcHh/848/

I am trying to remove the class for the span that contains the plus glyphicon and replace it with the minus glyphicon when the content is visible.

Here is my jQuery:

$(document).ready(function () {

    $('#toggle-view li').click(function () {

        var text = $(this).children('div.panel');

        if (text.is(':hidden')) {
            text.slideDown('200');
            $(this).children('span').html('-');     
        } else {
            text.slideUp('200');
            $(this).children('span').html('+');     
        }

    });

});

Here is my HTML:

<ul id="toggle-view">
    <li class="li-toggle">
        <h3 class="toggle-h3">Title 1<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h3>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
        </div>
    </li>
</ul>

I have tried implementing this code to try and remove the plus glyph and replace it with the minus glyph however I can't get it to work:

$(this).children('span')removeClass(glyphicon glyphicon-plus glyph-plus-toggle).addClass(glyphicon glyphicon-minus glyph-minus-toggle);

Any idea where I am going wrong?

Thanks :)

Upvotes: 0

Views: 774

Answers (3)

Sams
Sams

Reputation: 694

I`m not sure about .children() method...

You can try find() like this and just use .addClass("classname") or .removeClass("classname"). Note that "." (dots) are not needed.

$(document).ready(function () {

  $('#toggle-view li').click(function () {

    var text = $(this).children('div.panel');

    if (text.is(':hidden')) {
        text.slideDown('200');
        $(this).find('span').removeClass("glyphicon-plus");
        $(this).find('span').addClass("glyphicon-minus");   
    } else {
        text.slideUp('200');
        $(this).find('span').addClass("glyphicon-plus");
        $(this).find('span').removeClass("glyphicon-minus");
    }

 });
});

Upvotes: 0

Sander Koedood
Sander Koedood

Reputation: 6337

The addClass and removeClass functions require strings, to know what classes you are talking about. A string is declared by putting quotes around the text. Because those are missing, it now thinks those are variables, which they aren't.

Added to that, you were missing a dot before removeClass.

Try this:

$(this).children('span').removeClass("glyphicon glyphicon-plus glyph-plus-toggle").addClass("glyphicon glyphicon-minus glyph-minus-toggle");

Edit: I changed it, and it works: See the fiddle

The problem was your use of .children(). I changed it with .find(). Taken from this page:

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

Since the elements you were looking for aren't direct children, they didn't get selected.

Upvotes: 4

Anton
Anton

Reputation: 542

Problems:

  1. You put removeClass right after the children() function, without using a dot.
  2. You didn't use brackets (" or ') for your string.
  3. You've tried to remove/append multiple classes at once by seprating the classes with a space. I don't think this is possible.

Also, you put a number in a string, wich is unnecessary. You don't need to use brackets if you want to have an integer.

Upvotes: 0

Related Questions