jquery show and hide on same link click

Question

hi everyone,

I have a div and I want to show and hide on a link click. Not two different links to show and hide but only one. I have used toggle() but its not working for me..

Here is the code

<a id="showhidediv">show-hide</a>
<div id="maindiv">
 <div id="innerleftdiv" style="width:49%;float:left">
 </div>
 <div id="innerrightdiv" style="width:49%;float:left">
 </div>
<div>

<script text="text/javascript">
  $().ready(function){
    $("showhidediv").click(function(){
      $("maindiv").hide()
    });
</script>

Thanks

Answer 1

The following works. If you're unable to get this to work for you particular project, the problem is elsewhere, and not with the toggle method or the jQuery syntax:

$(function(){
  $("a#showhidediv").click(function(){
    $("#maindiv").toggle();
  });
});

From your comments, it may be the case that you want to use $.slideToggle() instead:

$(function(){
  $("a#showhidediv").click(function(){
    $("#maindiv").slideToggle();
  });  
});

With two floated elements, you may want to modify your markup a bit:

<div id="maindiv">
  <div style="width:49%;float:left;">Foo</div>
  <div style="width:49%;float:left;">Bar</div>
  <div style="clear:both"></div>
</div>

All of this works as expected as demonstrated in this online demo: http://jsbin.com/anaxi/edit and using slideToggle in this demo: http://jsbin.com/anaxi/2/edit

Answer 2

The following usually works.

$('#showhidediv').click(function(e) {
    $('#maindiv').toggle();
    e.preventDefault(); // Stop navigation
});

What it does is call toggle() on the div you want to show/hide. If you have several of this links and the toggle div always follows the link you can do something like this:

$('.showhide').click(function(e) {
    $(this).next().toggle();
    e.preventDefault(); // Stop navigation
});

And the HTML code would look like this:

<a class="showhide">Foo</a>
<div>show me / hide me</div>

<a class="showhide">Bar</a>
<div>show me / hide me</div>

Hope it helps.

Answer 3

This should work (with the toggle)

$('#showhidediv').click( function() { $('#maindiv').toggle();return false; } );

Answer 4

have you tried:

$('#showhidediv').click(function(){
  $('#maindiv').toggle();
  return false; // should return false to prevent page loading
})

Answer 5

Thanks every one for trying to answer the question and every one was right..

I found the solution . The following is the jquery function

$("#showhide").click(function() { 
  if ( $("#maindiv").is(":visible") ) { 
    $("#maindiv").hide(); 
  } else if ( $("#maindiv").is(":hidden") ) { 
    $("#maindiv").show(); 
  }
});

Answer 6

I accomplish this by changing the link text based on the visibility of the div you want to toggle.

if ($("#divToToggle").is(":visible"))
   $("#linkId")[0].innerText = "show";
else
   $("#linkId")[0].innerText = "hide";

$("#divToToggle").toggle();

If toggle is not working for you for some reason just use show() and hide() on divToToggle

Answer 7

All the solutions above should work. I can't imagine that it would be something in CSS that would prevent this from working.

What version of jQuery are you using?