Hello!
im new to html and Javascript and wanted to create a button which makes my frame visible and invisible.
I googled a lot and could make text invisible and visible but that has not worked with my frame! : /
The “frame” is a div class.
Thank you : )
Welcome to this forum 
It’s better not to call a <div> a frame because HTML frames are something else.
Here is one way of toggling visibility of the <div> (giving the <div> an ID of “frame”):
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="UTF-8">
<style>
#frame {visibility:hidden; border: 1px solid red;}
</style>
</head>
<body>
<button id="toggle">Toggle visibility</button>
<div id="frame">
<p>Paragraph in div</p>
</div>
<script>
document.getElementById("toggle").addEventListener("click",toggleVis);
function toggleVis(){
frm = document.getElementById("frame");
if(frm.style.visibility != "visible"){
frm.style.visibility = "visible";
}
else{
frm.style.visibility = "hidden";
}
}
</script>
</body>
</html>
The CSS visibility:hidden ensures the <div> is initially hidden. However it does not set the element’s .style.visibility property to “hidden”. I have therefore used not equal (!=) in the function to ensure the visibility changes on the first click of the button.
Note the addEventListener needs to come after the HTML for the button. This is why I have put the JavaScript after the HTML for the elements. When the page loads into a browser the addEventListener is executed but the function is not executed until the button is clicked.
Thank You So Much!
but i have one question, can i use a class instead of an id? I usually use Classes : )
Greetings. And do i need to add the script in the Html or can i link the Script file too ?
Classes are better to use when there is an expectation that there may be more than one of that type of element.
With the frame there is expected to be only one of them, which is why the unique identifier is preferred in that case.
Thank You!
Learned Something new!
Maybe i have too many Questions, and maybe its the wrong topic but is there a way to add Buttons and Images in this Box which will dissapear too, or do i have to make a script for every Part?
Thank You!
Thank You Again but i have some problems.
I added the script, maybe i did wrong could you help me, i would really apreciate it!
Thank You 
HTML:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<script src="Doge Clicker.js"></script>
<link rel="stylesheet" type="text/css" href="Doge Clicker CSS.css" media="screen" />
<body>
<h1 class="BigHeadingClickButton">DogeClicker</h1>
<br>
<button class="AddDogecoin" > CLICK</button>
<img class="HMMDoge" src="">
<img class="DogecoinFoto" src="">
<h6 class="DogecoinBalance">DOGECOIN:</h6>
<button class="Shop">Doge Shop</button>
<br>
<button class="Settings">Settings</button>
<br>
<button class="Market">Doge Market</button>
<br>
-----------------------------------------------------------------------------
<button id="Research">Doge Labor</button>
-----------------------------------------------------------------------------
<br>
<button class="DogeBase">Doge Base </button>
--------------------------------------------------------------------------------
<div class="ToggleResearch"></div>
-------------------------------------------------------------------------------
</body>
</body>
</html>
CSS:
.BigHeadingClickButton {
text-align: center;
width: 1000px;
border-radius: 10px;
background-color: rgb(97, 97, 97);
color: white;
font-family: cursive;
}
body {
background: radial-gradient( rgb(255, 255, 255), rgb(180, 180, 180), rgb(255, 214, 214) );
visibility: visible;
}
.AddDogecoin {
background-color: silver;
color: rgb(0, 247, 255);
padding: 5px;
border-radius: 50px;
width: 300px;
height: 300px;
font-family: cursive;
font-size: 50px;
background-image: "HMMDoge";
}
.Settings {
font-family: cursive;
border-radius: 20px;
background-color: lime;
font-size: 20px;
}
.HMMDoge {
position: relative; right: 270px;
position: relative; bottom: 45px;
opacity: 90%;
}
.DogecoinFoto {
width: 180px;
height: 100px;
position: relative; left: 1200px;
position: relative; bottom: 200px;
}
.DogecoinBalance {
position: relative; bottom: 440px;
position: relative; left: 1500px;
color: gold;
background: linear-gradient(gold silver grey);
font-size: 20px;
font-family: cursive;
}
.Shop{
background-color:magenta;
border-radius: 20px;
font-family: cursive;
font-size: 20px;
}
.Market{
background-color: orangered;
font-family: cursive;
font-size: 20px;
border-radius: 20px;
}
--------------------------------------------------------------------
#Research {
font-family: cursive;
font-size: 20px;
border-radius: 20px;
background-color: aqua;
}
-------------------------------------------------------------------------------------------
.DogeBase {
font-family: cursive;
font-size: 20px;
border-radius: 20px;
background-color: gold;
}
------------------------------------------------------------
#ToggleResearch {
visibility: hidden;
border: 3px solid grey;
}
--------------------------------------------------------------------------------------------------------
Java Script:
document.getElementById("Research").addEventListener("click",toggleVis);
function toggleVis(){
frm = document.getElementById("ToggleResearch");
if(frm.style.visibility != "visible"){
frm.style.visibility = "visible";
}
else{
frm.style.visibility = "hidden";
}
}
---------------------------------------------------------------------------------------
as You can see i added No Text in the Box, is that okay or is it the issue?
Did you test the example given to you by @Archibald and see what happens when you add buttons and images inside the #frame div?
If you make the parent visibility:hidden then all the children will be hidden also (unless they explicitly have visibility:visible applied). Note that visibility does not remove the element from the flow. It just makes it invisible. If you want the space to collapse then display:none would be a better choice.
e.g. Roughly:
It is unclear from your html what you are trying to achieve as that html is badly formed. It looks as though you are trying to click <button id="Research">Doge Labor</button> and then you want to show this : <div class="ToggleResearch"></div> based on the js you are using.
However you changed the id of ToggleResearch to a class so the js can no longer find it.
frm = document.getElementById("ToggleResearch");
You would need an ID in the html.
<div id="ToggleResearch"></div>
The js will then show that ToggleResearch div but as it is empty then no one will know!!
You would need content inside that div if you want to show something.
e.g.
<div id="ToggleResearch">Now you see ME</div>
You should use headings in logical order as you cannot jump from an h1 to an h6.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.