CODEWITHSUNDEEP
javascripthtml
DeSynth
DeSynth

Reputation: 57

How can I hide a div until a button is clicked?

I'm trying to create 3 divs that are hidden when the page load, so that when I click their respective buttons they show up, however, no matter what I do, I cannot get them to show up with the button click.

Here is the relevant part of the code:

My div and button:

<button onclick="TestsFunction()">Tests</button>

<div id="TestsDiv" style="display:none">
    tests here!
</div>

And the JS used to show it:

function TestsFunction() {
    var T = document.getElementById("TestsDiv");
    T.style.display = "none";}

I can successfully hide the div when I load the page, however after I click the button it doesn't show up again.

I tried

window.onload = function(){
    document.getElementById('TestsDiv').style.display = 'none';
}

Instead of style="display:none" on the div to see if the way I hid it was the problem, but the div still wouldn't show up.

I'm a beginner and I'm not good with JS, HTML or PHP, if possible can someone both help and explain my mistake? Do I need something else in my code? I tried reading similar threads but the solutions were all too complicated for my understanding and I ended up not being able to fix my problem. Thank you!

Upvotes: 3

Views: 41586

Answers (5)

clyde correa
clyde correa

Reputation: 86

do like this =>

function TestsFunction(){
$("#TestsDiv").css("display","block")
}

before that you should include jquery cdn. thank you.

Upvotes: 0

Qirel
Qirel

Reputation: 26450

You need to adapt your function to toggle the display of the div. Currently it is only hiding it - but if its already hidden, remove the display = "none" to show it again. You remove it by setting the display style to an empty string (which makes it default).

function TestsFunction() {
    var T = document.getElementById("TestsDiv"),
        displayValue = "";
    if (T.style.display == "")
        displayValue = "none";

    T.style.display = displayValue;
}
<button onclick="TestsFunction()">Tests</button>

<div id="TestsDiv" style="display:none">
    tests here!
</div>

If you only want it to be shown, and not to be able toggle display on and off, just set it to the empty string right away.

function TestsFunction() {
    document.getElementById("TestsDiv").style.display = "";
}
<button onclick="TestsFunction()">Tests</button>

<div id="TestsDiv" style="display:none">
    tests here!
</div>

Upvotes: 1

jbrown7061
jbrown7061

Reputation: 103

You should look into jQuery's hide() and show() methods. They take care of setting the styles for you.

https://www.w3schools.com/jquery/jquery_hide_show.asp

Upvotes: 0

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92427

try

function TestsFunction() { TestsDiv.style.display = 'block' }


function TestsFunction() { TestsDiv.style.display = 'block' }
<button onclick="TestsFunction()">Tests</button>

<div id="TestsDiv" style="display:none">
    tests here!
</div>

Upvotes: 1

MauriceNino
MauriceNino

Reputation: 6757

You need to set display to block (or something else) but not hide when button is clicked!

function TestsFunction() {
    var T = document.getElementById("TestsDiv");
    T.style.display = "block";  // <-- Set it to block
}
<button onclick="TestsFunction()">Tests</button>

<div id="TestsDiv" style="display:none">
    tests here!
</div>

Upvotes: 10

Related Questions