26 April, 2013
0 Comments
1 category
If you want to add an element initially as hidden, just use CSS display: none.
In the onclick event, use jQuery to show the element.
TIP: Don’t use CSS visibility: hidden, because this will not work.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Research</title> <style type="text/css"> #page { position: relative; } span.action { cursor: pointer; text-decoration: underline; } #elementToShow { position: absolute; width: 100px; left: 30px; top: 60px; display: none; /* visibility: hidden; */ /* <== This will not work*/ } </style> <script type="text/javascript" src="Scripts/jquery-2.0.0.min.js"></script> <script type="text/javascript"> App = {}; $(document).ready(function () { }); </script> </head> <body> <div id="page"> <div id="elementToShow">Hello world!</div> <span onclick="$('#elementToShow').show();" class="action">show</span> <span onclick="$('#elementToShow').hide();" class="action">hide</span> </div> </body> </html>
Initial
After clicking on "show"
Tags: jQuery
Category: Uncategorized