Archive

Posts Tagged ‘jquery effects’

Toggle/(Hide/Show) Div Using Jquery

var hideshowdiv = “#” + document.getElementById(divid).id;

$(function() {

$(hideshowdiv).toggle();

});

Various other ways and effects to hide/show are as follows:

Using toggle effects

$(function() {

$(hideshowdiv).toggle(“slow”);

});

Using slideToggle

$(function() {

$(hideshowdiv). slideToggle(“slow”);

});

Using  slideDown and slideUp

$(function() {

if (document.getElementById(divid).style.display == “none”) {

$(hideshowdiv).slideDown(“slow”);

}

else if (document.getElementById(divid).style.display == “block”) {

$(hideshowdiv).slideUp(“slow”);

}

});

Using hide(), show()

$(hideshowdiv).hide();

$(hideshowdiv).show();

Toggle Div Using Jquery

January 12, 2010 Leave a comment

Show/Hide div using jquery:

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
     <script language="javascript">
     $(document).ready(function() {
          $('#lnkbtn').click(function() {
               if ($('#divContent').is(":hidden"))
               {
                    $('#divContent').slideDown("slow");
                    document.getElementById('lnkbtn').innerText = 'Hide Div';
               } else {
                    $('#divContent').slideUp("slow");
                    document.getElementById('lnkbtn').innerText = 'Show Div';
               }
          });
     });
     </script>
</head>
<body>
     <a href="javascript:void(0);" id="lnkbtn">Hide Div</a>
     <div id="divContent">
          Content<br>
          comes<br>
          here
     </div>
</body>
</html>

Other jquery effects can be found at :
http://docs.jquery.com/Effects