使div在页面加载时隐藏，然后在单击按钮时取消隐藏

Question

I tried a technique that I read about somewhere, but it isn't working. The technique was to make a class called hidden that is removed on a function call. Since I'm new to using JQuery, I think something might be wrong with how I was writing the onclick function. I'll post my attempt and then I'll appreciate it if you can help me correct my 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;
}

Answer 1

function() {$('newthreaddiv') should be function() {$('#newthreaddiv') You are missing the # .

Also, I'm not sure if this is just a typo or in your actual code, but you are missing a closing bracket ( > ) on your username input field.

Answer 2

I recommend that you do not use inline javascript. Instead, create a listener for click events on the 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 you need the javascript to be inline, don't use a function:

<button onclick="$('#newthreaddiv').removeClass('hidden');">New Thread</button>

WORKING EXAMPLE

---

METHOD 3

You can use a function, but it will need to be an " Immediately-Invoked Function Expression " (and I don't see any purpose in this context):

<button onclick="(function() {$('#newthreaddiv').removeClass('hidden');}())">New Thread</button>

WORKING EXAMPLE