1 Replies - 1452 Views - Last Post: 02 December 2010 - 10:52 AM

#1 gilgimech   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 02-December 10

Help with toggleClass() issue

Posted 02 December 2010 - 08:47 AM

Can anyone help me understand why this isn't working?

$(document).ready(function () {
	 
	 $('.open_btn').click(function() {
		$(this).parent().parent().next().find('.open_close_div').toggle();
		$(this).toggleClass('close_btn');
    });
	 
	$('.close_all').hide();
	
	$('.open_all').click(function() {
		$('.open_close_div').toggle();
		$('.open_all').hide();
		$('.close_all').show();
		if ($('#button').hasClass('open_btn')) {
			$('.open_btn').toggleClass('close_btn');
		};
    });
	
	$('.close_all').click(function() {
		$('.open_close_div').toggle();
		$('.close_all').hide();
		$('.open_all').show();
		if ($('#button').hasClass('close_btn')) {
			$('.close_btn').toggleClass('open_btn');
		};
    });
});




<div id="content_main_bg_clear_top"></div>
    <div id="content_main_bg_middle" >
        <div id="content_main_wrapper">
        <br/>
        <div id="content_clear_title"></div>
        <div id="content_clear_text">
            <div id="open_close_all" class="open_all"><a href="#">Open All</a></div>
            <div id="open_close_all" class="close_all" ><a href="#">Close All</a></div>
        </div>
    </div>
</div>
<div id="content_main_bg_bottom"></div>
<br/>
<div id="content_main_bg_top">
    <div id="main_content_title"> 
        <div id="button" class="open_btn"><a href="#"></a></div>
    </div>
</div>
<div id="content_main_bg_middle" >
    <div id="content_main_wrapper" class="open_close_div" style="display:none;" >
        content............
    </div>
</div>
<div id="content_main_bg_bottom"></div>



When I click the "open all" everything works, but when I click the "close all" $('.close_btn').toggleClass('open_btn'); it doesn't toggle the close_btn class to the open_button class.

Is This A Good Question/Topic? 0
  • +

Replies To: Help with toggleClass() issue

#2 moopet   User is offline

  • binary decision maker
  • member icon

Reputation: 345
  • View blog
  • Posts: 1,190
  • Joined: 02-April 09

Re: Help with toggleClass() issue

Posted 02 December 2010 - 10:52 AM

element has class: "open"
element.toggleClass("closed")
now element has class: "open closed"
element.toggleClass("open")
now element has class: "closed"

toggleClass(x) only toggles whether an element has the class 'x' applied to it. It doesn't remove any other classes. Is the problem something to do with that?
If you use firebug or webkit's element inspector you can run these commands live in the browser and see what's going on.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1