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

image

After clicking on "show"

image

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.