Question

I have a jquery dropdown text menu and when i click the choice i choose to drop down, the image changes from red to gray, but when i press it again it stays grey and i want it to change back to red. I cant figure out how to make it go back to the red arrow when i close it.

The code is below.

    <script type="text/javascript">
    $(document).ready(function(){

    $('.serviceDesc').hide(); 
    //$('.serviceName:first').addClass('active').next().show(); 

    $('.serviceName').click(function(){
    if( $(this).next().is(':hidden') ) { 
    $('.serviceName').removeClass('active').next().slideUp(); 
    $(this).toggleClass('active').next().slideDown(); 
    }
    else {
    $(this).next().slideUp()
    }
    return false; 
    });

    });
    </script>

    <div id="servicesContainer">
      <h2 class="serviceName"><a href="#">
        <table>
          <tr>
            <td>Test</td>
            <td class="lasttd"><div></div></td>
          </tr>
        </table>
        </a> </h2>
      <div class="serviceDesc">
        <div class="block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
      </div>
      <h2 class="serviceName"><a href="#">
        <table>
          <tr>
            <td>Test</td>
            <td class="lasttd"><div></div></td>
          </tr>
        </table>
        </a></h2>
      <div class="serviceDesc">
        <div class="block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
      </div>
      <h2 class="serviceName"><a href="#">
        <table>
          <tr>
            <td>Test</td>
            <td class="lasttd"><div></div></td>
          </tr>
        </table>
        </a></h2>
      <div class="serviceDesc">
        <div class="block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
      </div>
      <h2 class="serviceName"><a href="#">
        <table>
          <tr>
            <td>Test</td>
            <td class="lasttd"><div></div></td>
          </tr>
        </table>
        </a></h2>
      <div class="serviceDesc">
        <div class="block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
      </div>
      <h2 class="serviceName"><a href="#">
        <table>
          <tr>
            <td>Test</td>
            <td class="lasttd"><div></div></td>
          </tr>
        </table>
        </a></h2>
      <div class="serviceDesc">
        <div class="block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
      </div>
      <h2 class="serviceName"><a href="#">
        <table>
          <tr>
            <td>Test</td>
            <td class="lasttd"><div></div></td>
          </tr>
        </table>
        </a></h2>
      <div class="serviceDesc">
        <div class="block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
      </div>
      <h2 class="serviceName"><a href="#">
        <table>
          <tr>
            <td>Test</td>
            <td class="lasttd"><div></div></td>
          </tr>
        </table>
        </a></h2>
      <div class="serviceDesc">
        <div class="block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
      </div>
      <h2 class="serviceName"><a href="#">
        <table>
          <tr>
            <td>Test</td>
            <td class="lasttd"><div></div></td>
          </tr>
        </table>
        </a></h2>
      <div class="serviceDesc">
        <div class="block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
      </div>
    </div>
    <style>   
    #servicesContainer {
    width: 485px;
    height: 400px;
    margin: 0 auto;
    margin-top: 20px;
    }
    h2.serviceName {
    margin: 0;
    margin-bottom: 5px;
    margin-top: 5px;
    background-image: url(http://i.imgur.com/nJRIr.png);
    background-position: right top;
    background-repeat:no-repeat;
    height: 29px;
    line-height: 24px;
    width: 480px;
    font-size: 18px;
    font-weight: bold;
    float: left;
    color:#000;
    }
    h2.serviceName a {
    color: #000;
    text-decoration: none;
    display: block;
    }
    h2.active {
    background-position: right bottom;
    }

    table { width: 450px; }
    table td { white-space: nowrap; }
    table td.lasttd { width: 100%; }
    table td.lasttd div { width: 100%;
    background-image:url(http://i.imgur.com/UnCTi.gif);
    background-repeat:repeat-x;
    height: 5px;
    margin-top: 3px;

    }

    .serviceDesc {
    margin: 0 0 10px;
    padding: 0;
    overflow: hidden;
    width: 480px;
    clear: both;
    }
    .serviceDesc .block {
    }
    .serviceDesc .block p {
    color: #413f44;
    margin: 0;
    font-size:18px;
    }
    </style>

I have a feeling it has to do with the jquery not calling back the css is that it?

Here is a working example http://jsfiddle.net/AtqvM/

Answer 1

When a heading with a visible next section is clicked, you are just sliding up the next section and aren’t removing the ‘active’ class from the heading. Change:

$(this).next().slideUp();

to

$(this).removeClass('active').next().slideUp();