Tutorial :jquery show and hide on same link click



Question:

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


Solution: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


Solution:2

This should work (with the toggle)

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


Solution:3

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.


Solution:4

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


Solution: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();     }  });  


Solution:6

have you tried:

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


Solution: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?


Solution:8

you could probable try this out

<a href="javascript:toggleDiv('maindiv');">show-hide</a>       <div id="maindiv">            #....content goes here.....       <div>     <script text="text/javascript">     function toggleDiv(divId) {        $("#"+divId).toggle();     }   </script>  

works for me, also checkout this link


Solution:9

Javascript code :

$(".user-profile-info").unbind().click(function(){        if($( ".user-profile-info" ).hasClass("collapsed")){             $('#user-profile-submenu').css('display', 'block');           $( ".user-profile-info" ).removeClass("collapsed");      }        else      {                  $( ".user-profile-info" ).addClass("collapsed");           $('#user-profile-submenu').css('display', 'none');      }  });  

HTML code :

<div class="user-profile-info collapsed"></div>  <div id="user-profile-submenu">Content of click</div>  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »