Home > Jquery > Toggle Div Using Jquery

Toggle Div Using Jquery


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
Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: