jQuery: Click event with two functions

Question

I have a box with a headbar-div and a content-div and I created a script which can toggle the content-div with a slide effect. Normally the headbar-div has a background-color #ccc but when I toggle the content away the background-color of the headbar-div should be #FFF; And after that, if I let the content be shown again the background-color should change again to #ccc.

With my code the problem is that if I click again the background-color doesn't change back

Script

$( ".togglepanelcontent" ).click(function() {
    var icon = $( this );
    icon.closest( ".panelgroup" ).find( ".panelcontent" ).slideToggle();
    icon.closest( ".panelgroup" ).find( ".panelheadbar" ).addClass("panelheadbar_m");
});

HTML

<div id="module" class="panelgroup">
    <div class="panelheadbar">Title<div class="togglepanelcontent"><span>-</span></div></div>
    <div id="pc" class="panelcontent ui-resizable">
        Text
    </div>
<br>

CSS

.togglepanelcontent {
    float: right; cursor: pointer;
}
.panelheadbar {
    padding: 5px;
    font-weight: bold; 
    color: #000;
    overflow: hidden;
    height: auto;
    cursor: move;
    border-bottom: 1px solid #333;
    background-color: #ccc;
}
.panelheadbar_m {
    background-color: #FFF !important;
}
.panelheadbar_m:hover { 
    background-color: #ccc !important;
}
.panelcontent {
    overflow: auto;
    overflow-x: hidden;
    padding: 10px; 
    top: 0px; 
    left: 0px;
    background-color: #FFF;
    border-left: 1px solid #333;
    border-right: 1px solid #333; 
    border-bottom: 1px solid #333;
}

The counterpart to .addClass("panelheadbar_m") is missing

Andreas
– Andreas

2015-07-16 14:05:00 +00:00
Commented Jul 16, 2015 at 14:05 — Andreas
– Andreas, Commented Jul 16, 2015 at 14:05

Praveen Kumar Purushothaman · Accepted Answer · 2015-07-16 14:05:34Z

1

When you are slideToggling, you need to toggleClass too!

Replace the following in your code:

icon.closest( ".panelgroup" ).find( ".panelheadbar" ).addClass("panelheadbar_m");

With this:

icon.closest( ".panelgroup" ).find( ".panelheadbar" ).toggleClass("panelheadbar_m");

answered Jul 16, 2015 at 14:05

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

1 Comment

Klipp Ohei Over a year ago

Thanks, that works. :) I can accept the answer in 10min

Collectives™ on Stack Overflow

jQuery: Click event with two functions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related