Facing problem in toggle method of jquery

Question

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

Nick Craver · Accepted Answer · 2011-05-25 12:04:59Z

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();

edited May 25, 2011 at 12:04

answered May 25, 2011 at 11:59

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

4 Comments

Vivek Over a year ago

Thanks Nick... Actually I want to toggle the div and class of span.

Nick Craver Over a year ago

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

Vivek Over a year ago

Please see the updated question....Now, I am trying to toggle span class and Order_header div. How to do this.

Nick Craver Over a year ago

@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

Collectives™ on Stack Overflow

Facing problem in toggle method of jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related