Hiding a DIV by click on another DIV

Question

I have a 'div' tag( by id=go) and write a script which i click on div, then another div (by id=example) will be shown, and show some data: this is my div :

  <div id="go" style="position: relative">Click</div>
  <div id="example" style="position: relative"></div>

and the script:

 $("#go").click(function () {

                   $("#example").fadeIn(1200);
                   $("#count").text('');
                    setInterval(
                         function () {
                            p(); count();
                          }, 8000);
                    });

and i want when i click on div(by id= go) agin the div (with id=example) be hide , How can i improve my script to do it?

Answer 1

You can use fadeToggle() to toggle between fadeIn() and fadeOut() here:

$("#example").fadeToggle(1200);

Fiddle Demo

Answer 2

Did you try .toggle() ? Reference is at jQuery docs . AFAIK it does all you need - including animation.

Answer 3

Use .toggle() . Check this

$("#example").hide();
$("#go").click(function () {
      $("#example").toggle('slow');
});

DEMO