How to make default jQuery Hide

So I have some code here and it works perfectly when I press the button the text is hidden, and when I press show it shows. I was wondering if there was a way to make it hidden at the start? I am making a presentation so i want to go through each and show the content one by one, instead of it all being shown first and then having to click "hide" to hide it. Thanks in advance.

            <h1 class="c"> Gaming </h1>
    </header>
    <ul>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
        $("#hide").click(function(){
        $("aside").hide();
        });

        $("#show").click(function(){
        $("aside").show();
        });
        });
    </script>

    </head>
    <aside>
    <p>If you click on the "Hide" button, I will disappear.</p>

    </aside>
        //updated code below
        <button id="hide">Hide</button>
        <button id="show">Show</button>
        <li><a href=""> 
            <!--<ul>-->Link<!--</ul>-->
        </a>
        </li>
        <li><a href=""> 
            <!--<ul>-->Link<!--</ul>-->
        </a>
        </li>
        <li><a href=""> 
            <!--<ul>-->Link<!--</ul>-->
        </a>
        </li>
    </ul>
    </section>
    </nav>

Answers


try with inline-css

<asside id="help" style="display:none">hide</asside>

In your css:

aside
{
    display:none;
}

See this: jsfiddle


Need Your Help