jqueryonclickjquery-eventsunbind

jQuery click and unbind

I'm not a software developer and just started learning jQuery. In the following code I add .green class to .show_hide div on click, and I want to remove .green class on .show_hide when clicked it's again and should also close .slidingDiv.

<div><a href="#" class="show_hide">Show/hide</a></div>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>​

.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}
 
.show_hide {
    display:none;
}
.green {
    background: green;
}​

$(document).ready(function(){
 
    $(".slidingDiv").hide();
    $(".show_hide").show();
 
    $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
        $(".show_hide").addClass("green");
    });    
       
});
Solution

  • Take a look at this, you need to use toogleClass function.

    Live Demo:

    http://jsfiddle.net/oscarj24/Waq4W/