jQuery off click with same element

Question

I have a button, and what I have is when you click on it, and new element "drops" in. So what I want to do is when you press it again it goes back. As essentially fades out. Here's what I have so far \\

$(".icon-search").click(function(){
    $(".search").css('height', '100px')
});

When you click on the icon, the black shape goes to 100px . And what I want to do, is get rid of it, by clicking on it again. I've seen other stuff online, but none seemed to work.

Here's a demo http://jsfiddle.net/PHX3A/

Answer 1

JSFiddle

.toggleClass() will do the trick for you.

.toggleClass() :

Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.

JavaScript :

$(".icon-search").click(function(){
    $(".search").toggleClass("doHeight");
});

CSS :

.doHeight{
 height:100px;   
}

for further information in using .toggleClass() click here

2nd Option :

JSFiddle

using .toggle() reference : toggle

JS :

$( "div" ).click(function() {
  $( ".search" ).toggle( "slow" );
});

Answer 2

Use toggleClass function to set the CSS . In this example, I added CSS to the toggle class

Try this:

JQuery:

$(".icon-search").click(function(){
    $(".search").toggleClass('toggle')
});

CSS:

.toggle{
    height:100px;
}

JSFiddle Demo