0

HI,

I have following html

    <div id="LineInfoHeader" class="div_header_inner headertitle align_center defaultheadercolor portlet-header-left-padding default_bottom_border default_border_color"><span class="ui-icon ui-icon-minusthick"></span>Line Item Information</div>
**Edit**

    <div class="div_content_inner" id="Order_header"></div>

I am trying to toggle span class and Order_header div.
I am using following code:

$(".div_header_inner.ui-icon").toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick").toggle();
}

I don't know why its not working. Please suggest where I am going wrong. Thanks in advance. You can see the problem here

1 Answer 1

6

Your selector is off, it's looking for an element with both classes .div_header_inner and .ui-icon, rather than one inside the other. For that you need a space in-between (the descendant selector), like:

$(".div_header_inner .ui-icon").toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick").toggle();

Also, .toggleClass() can take multiple classes (space separated), so you can shorten it down to:

$(".div_header_inner .ui-icon").toggleClass("ui-icon-minusthick ui-icon-plusthick").toggle();

You can try that version here. But, it's not immediately clear to me which element you want to .toggle() at the end, if it's the <div> you need to change it around a bit, like this:

$(".div_header_inner").toggle().find(".ui-icon").toggleClass("ui-icon-minusthick ui-icon-plusthick");

or this:

$(".div_header_inner .ui-icon").toggleClass("ui-icon-minusthick ui-icon-plusthick").parent().toggle();
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks Nick... Actually I want to toggle the div and class of span.
@Vivek - In that case the bottom two are options, though this will hide the space (since it's a child), not sure if toggling the class matters so much when that happens :)
Please see the updated question....Now, I am trying to toggle span class and Order_header div. How to do this.
@Vivek - this would be the generic solution, so you could have any number in a page: jsfiddle.net/nick_craver/RPEK9/8 also, consider .slideToggle() instead: jsfiddle.net/nick_craver/RPEK9/9

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.