Question

I have a simple jQuery accordion which toggles CSS class (show, hide) with sliding effect.
I would like to remove CSS padding on parent div with CSS class moduletable (from padding-bottom: 40px to padding-bottom: 0) when toggle happens but so far I wasn’t successful.

This is the CSS code:

body {
    width: 300px;
    font-family: Arial;
    padding: 20px;
}
.moduletable {
    padding-bottom: 40px;
    background: #f5f5f5;
}
.accordion .module-title h3  {
    color: #930042;
    font-size: 1.5em;
    margin-bottom: 0.45em;
    margin-top: 1.6em;
    background: url(http://imageshack.us/a/img7/4521/hideoy.png) no-repeat right center transparent;
    cursor: pointer;
}
.accordion .module-title h3.show  {
    background: url(http://imageshack.us/a/img818/6398/showw.png) no-repeat right center transparent;
}

This is the HTML code:

<article class="moduletable accordion" id="module-175">
  <header class="module-title">
    <h3>Categories</h3>
  </header>
  <section class="module-content">
    <div class="custom accordion">
      <ul>
        <li>
        <a href="#">Events</a>
        </li>
        <li>
        <a href="#">Shows</a>
        </li>
      </ul>
    </div>
  </section>
</article>​

And this is jQuery code:

$('.accordion .module-title h3').click(function () {
    $(this).toggleClass('show');
    $(this).parent().next('.module-content').slideToggle({duration:500});
});

​

You can see working example here: http://jsfiddle.net/esedic/NQHax/

Answer 1

You could use toggleClass():

$('.accordion .module-title h3').click(function () {
    $(this).toggleClass('show');
    $(this).parents(".moduletable").toggleClass("nopadding");
    $(this).parent().next('.module-content').slideToggle({duration:500});
});​

.moduletable.nopadding {
    padding-bottom: 0;
}

http://jsfiddle.net/NQHax/1/