Jquery Show and Hide
This simple tutorial teaches you to show and hide elements using jquery:
1) Lets start with $(document).ready() function. I hope you remember to have loaded jquery.js in your header file.
$(document).ready(function() {
2) Identify the css selector (id or class) and use the jquery hide() or jquery show() event function to hide or show that css class/id.
$(document).ready(function() { $('a#mainclass').hide(); $('a#mainclass').hide(); });
3) Attach the above selector with the jquery click event() as follows:
// basic show and hide $(document).ready(function() { $('#hideid').click( function() { $('.mainclass').hide(); }); $('#showid').click( function() { $('.mainclass').show(); }); });
3) You can use jquery hide(), jquery show() or jquery toggle() event.
4) Complete code is as follows:
<script type="javascript/text"> // basic show and hide $(document).ready(function() { $('#hideid').click( function() { $('.mainclass').hide(); }); $('#showid').click( function() { $('.mainclass').show(); }); }); </script>
<input type="submit" id="hideid" value="Hide" name="hideid"> <input type="submit" id="showid" value="Show" name="showid"> <div class="mainclass"> This is a dummy text for testing jquery. </div>
Post Comment