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>
    <meta charset="utf-8" />
    <style type="text/css">
            position: relative;
            cursor: pointer;
            text-decoration: underline;
            position: absolute;
            width: 100px;
            left: 30px;
            top: 60px;
            display: none;
            /* visibility: hidden; */ /* <== This will not work*/
    <script type="text/javascript" src="Scripts/jquery-2.0.0.min.js"></script>
    <script type="text/javascript">
        App = {};
        $(document).ready(function ()
    <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>



After clicking on "show"


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.