How to create a toggleout or close a div?

Question

I'm looking to toggle in an out of the content div. I can show it but I cannot figure out how to hide it again and I'm completely new to using JS and JQ.

Here is my fiddle. http://jsfiddle.net/Thelawman/3f9Le/

<div class="action" data-content="#content1">
            About
        </div>
        <div class="content" id="content1">
        Here is my blurb...An amazing blurb<br>
        Blah Blah Blah Blah Blah Blah<br>
        TBlah Blah Blah Blah Blah Blahy<br>
        Blah Blah Blah Blah Blah Blah
        </div>

$("div.action").click (function(){
        var $this = $(this);
        var target = $this.data('content');
        $('div.action').not($this).each(function(){
           var $other = $(this);
           var otherTarget = $other.data('content');
           $(otherTarget).hide();        
        });

        $(target).fadeIn({height: "toggle"}, 1000);

    });

If someone has a cleaner code or a better method than mine I'm all ears.

Many thanks in advance

Answer 1

Ok use the code

$("div.action").click (function(){
        $("#content1").fadeToggle();
    });

Working fiddle [FIDDLE][1] [1]: http://jsfiddle.net/3f9Le/1/

Here when The DIV having class action is clicked, you show ,content If its for first time ,else on 2nd time click hide ,Again on 3rd click show ,hide on 4th click,So sequence goes on.

Answer 2

Try this for your Jquery.

$("div.action").click (function(){

if ($(".content").is(":visible")) {

    $(".content").fadeOut("slow");

}
else {

    $(".content").fadeIn("slow");

}

});

Answer 3

To use data-content attribute use this:

$("div.action").click (function(){
        var $this = $(this);
        var target = $this.data('content');
        $(target).fadeToggle(200);
});

http://jsfiddle.net/3f9Le/3/