Remove class add class issue

Question

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 :)

are you not giving . before removeClass in your code also, are it just a typo while posting the question. — Mritunjay
– Mritunjay, Commented Aug 11, 2014 at 12:55
Review the code you pasted here in your question. It is missing parts (compared to the one in the link you gave)... — ericbn
– ericbn, Commented Aug 11, 2014 at 13:04

Sander Koedood · Accepted Answer · 2014-08-11 13:24:00Z

4

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.

edited Aug 11, 2014 at 13:24

answered Aug 11, 2014 at 12:56

Sander Koedood

6,4776 gold badges30 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Uncle Kracker Over a year ago

Thanks I have tried implementing this in the fiddle however they still aren't changing, I hate to be cheeky but could you show me a fiddle example?

Sander Koedood Over a year ago

@NickMaddren I have updated the answer for you. I hope this will solve your problems.

ericbn Over a year ago

@SanderKoedood, almost right. You switched the 'plus'/'minus' positions in the code. Also, you don't need the .html() call anymore.

Sander Koedood Over a year ago

@ericbn Thank you, you are right. I edited it according to your comment.

Uncle Kracker Over a year ago

Thanks guys awesome help here! I've just changed the CSS so that the minus floats right and it's working perfect :)

Anton · Accepted Answer · 2014-08-11 12:59:18Z

0

Problems:

You put removeClass right after the children() function, without using a dot.
You didn't use brackets (" or ') for your string.
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.

answered Aug 11, 2014 at 12:59

Anton

5521 gold badge6 silver badges16 bronze badges

Comments

Sams · Accepted Answer · 2014-08-11 13:37:27Z

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

 });
});

Collectives™ on Stack Overflow

Remove class add class issue

3 Answers 3

5 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Related