CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3537336
user3537336

Reputation: 221

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

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;
}

Upvotes: 0

Views: 997

Answers (2)

showdev
showdev

Reputation: 29168

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

Upvotes: 1

Dryden Long
Dryden Long

Reputation: 10182

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.

Upvotes: 2

Related Questions