Help with jQuery toggleClass() issue

JavaScript
1

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.

2

Try this

$('.close_btn').toggleClass('open_btn', 'close_btn');
3

No, doesn’t deem to make any difference. I might have to wait on this until I learn a little more.

Thanks Though.

4

What about this

$('.close_btn').toggleClass('open_btn').removeClass('close_btn');
5

if what you want to do is simply show/hide a group of divs when a link is clicked, this is a non jquery solution.

it might be easier.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
 
var status = 'block';
 
function showHide() {
    status = (status == 'block')? 'none' : 'block';
    for(var i=0; i < divsO.length; i++) {
     divsO[i].style.display = status;
    }
}
 
window.onload=function() {
       divsO = getElementsByClassName(document,'div','open_close');
}
 
//helper function to get elements by class name
function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\\-/g, "\\\\-");
    var oRegExp = new RegExp("(^|\\\\s)" + strClassName + "([\\\\s|$](file:///s:$))");
    var oElement;
    for(var i=0; i<arrElements.length; i++)
    {
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className))
        {
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}
</script>
 
</head>
<body>
 
<div>
      <a href="#" onclick="showHide(); return false;">show/hide divs</a>
</div>
 
<div class="open_close">div1</div>
<div class="open_close">div2</div>
<div class="open_close">div3</div>
<div class="open_close">div4</div>
<div class="open_close">div5</div>
</body>
 
</html>