How to remove a class with click function after it has been added with jquery
<p>I am new to jquery but I have been learning a lot lately. I am trying to add a class to a div with a click handler and then remove it when it is selected. Not sure if this is the best method as I am having trouble with it. Maybe toggleClass would be a better solution?</p>

<p>Here is the html:</p>

<pre><code>   &lt;nav&gt;
        &lt;div class="container"&gt;
            &lt;a class="toggleMenu" href="#"&gt;Menu&lt;/a&gt;
                &lt;ul class="nav"&gt;
                    &lt;li&gt;&lt;a href="index.html"&gt;Barnes&lt;/a&gt;&lt;/li&gt;

                    &lt;li&gt;&lt;a href="craig.html"&gt;Craig&lt;/a&gt;&lt;/li&gt;

                    &lt;li&gt;&lt;a href="bennie-donna.html"&gt;Bennie &amp; Donna&lt;/a&gt;&lt;/li&gt;

                    &lt;li&gt;&lt;a href="peggy.html"&gt;Peggy&lt;/a&gt;&lt;/li&gt;

                    &lt;li&gt;&lt;a href="tina.html"&gt;Tina&lt;/a&gt;&lt;/li&gt;

                    &lt;li&gt;&lt;a href="bennie.html"&gt;Bennie&lt;/a&gt;&lt;/li&gt;

                    &lt;li&gt;&lt;a href="debbie.html"&gt;Debbie&lt;/a&gt;&lt;/li&gt;

                    &lt;li&gt;&lt;a href="david.html"&gt;David&lt;/a&gt;&lt;/li&gt;

                &lt;/ul&gt; 
        &lt;/div&gt;  
    &lt;/nav&gt; 

&lt;div class="photos-wrap"&gt;
        &lt;div class="photos"&gt;
            &lt;img src="images/bennie/image1.jpg" alt="pic"/&gt;
            &lt;img src="images/bennie/image2.jpg" alt="pic"/&gt;
            &lt;img src="images/bennie/image3.jpg" alt="pic"/&gt;
            &lt;img src="images/bennie/image4.jpg" alt="pic"/&gt;
            &lt;img src="images/bennie/image5.jpg" alt="pic"/&gt;
            &lt;img src="images/bennie/image6.jpg" alt="pic"/&gt;
            &lt;img src="images/bennie/image7.jpg" alt="pic"/&gt;
            &lt;img src="images/bennie/image8.jpg" alt="pic"/&gt;
            &lt;img src="images/bennie/image9.jpg" alt="pic"/&gt;
            &lt;img src="images/bennie/image10.jpg" alt="pic"/&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>Here is the minimal css:</p>

<pre><code>.photos-wrap {
    position:absolute;
    top:400px;
}

.photos {
    margin:0 auto;
    width:60%;
    padding-bottom: 300px;
}

.photos img {
    position: relative;
    margin:-20px;
}

.toggleMenu {
    display:  none;
    background: #175E4C;
    text-decoration: none;
    padding: 10px 15px;
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    border: rgba(0, 0, 0, 0.8);

     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;

     background-image: linear-gradient(bottom, #175E4C 45%, #7BB5A5 100%);
    background-image: -o-linear-gradient(bottom, #175E4C 45%, #7BB5A5 100%);
    background-image: -moz-linear-gradient(bottom, #175E4C 45%, #7BB5A5 100%);
    background-image: -webkit-linear-gradient(bottom, #175E4C 45%, #7BB5A5 100%);
    background-image: -ms-linear-gradient(bottom, #175E4C 45%, #7BB5A5 100%);

    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.45, #175E4C),
    color-stop(1, #7BB5A5)
);
}

.drop-down {
    margin-top:280px;


And lastly the jquery:

$('.toggleMenu').click(function(){
    $('.photos-wrap').addClass('drop-down');

    }); 
</code></pre>

<p>This enables me to add the class 'drop-down' to the .photos div by clicking on the .toggleMenu. I want to remove the 'drop-down' class when the .toggleMenu is clicked again.</p>

<p>Anyone know how to accomplish this? Need help.</p>
