javascript - Making a div hidden on page load and then unhidden when a button is clicked -

i tried technique read somewhere, isn't working. technique make class called hidden removed on function call. since i'm new using jquery, think might wrong how writing onclick function. i'll post attempt , i'll appreciate if can me correct error(s).

html:

    <button onclick="function() {$('newthreaddiv').removeclass('hidden');}">new thread</button>     <div class="boardbox hidden" id="newthreaddiv">         <p>username:<input class="threadipt" type="text"</p>         <p>password:<input class="threadipt" type="text"></p>         <p>title:<input class="threadipt" type="text"></p>         <p>content:</p>         <button class="threadbutton">bold</button>         <button class="threadbutton">italicize</button>         <button class="threadbutton">underline</button>         <button class="threadbutton">insert image</button>         <textarea id="newthreadtxt"></textarea>         <p><button onlick="phpfunction">create thread</button></p>     </div>  

css:

div.boardbox {     background-color: #ccc;     padding: 5px;     margin: 20px; }  div.hidden {     display: none; } 

i recommend not use inline javascript. instead, create listener click events on button.

<button id="new_thread">new thread</button> <div class="boardbox hidden" id="newthreaddiv">    ... </div> 

jquery(function() {      jquery('#new_thread').on('click',function() {         jquery('#newthreaddiv').show();     });  }); 

working example

---

method 2

however, if need javascript inline, don't use function:

<button onclick="$('#newthreaddiv').removeclass('hidden');">new thread</button> 

working example

---

method 3

you can use function, need "immediately-invoked function expression" (and don't see purpose in context):

<button onclick="(function() {$('#newthreaddiv').removeclass('hidden');}())">new thread</button> 

working example