Only showing a div with a certain id by manipulating CSS file and my Javascript file
I'm new to Javascript DOM so I need a little bit of help walking through the basics before I can get going - I have an HTML file like this:
<div id="content">
<h1>FOREST SIMULATOR</h1>
<div id="intro">
starting forest (leave empty to randomize):
<br />
<textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
<br />
<button>generate</button>
</div>
<div id="sim" class="hidden"></div>
<div id="pushtray" class="overlay"></div>
</div>
I want to only show the content in the div with id="intro", making sure that the .overlay and #sim div are not displayed. I would need to make appropriate CSS rules and use Javascript's element.add, remove, and contains so I can control which CSS rules are active.
I'm not entirely sure what this means and how it would look like.
What am I doing in my CSS file exactly?
javascript html css dom client-side
edited Nov 23 '18 at 22:17
Adriano
1,35711325
add a comment |
I'm new to Javascript DOM so I need a little bit of help walking through the basics before I can get going - I have an HTML file like this:
<div id="content">
<h1>FOREST SIMULATOR</h1>
<div id="intro">
starting forest (leave empty to randomize):
<br />
<textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
<br />
<button>generate</button>
</div>
<div id="sim" class="hidden"></div>
<div id="pushtray" class="overlay"></div>
</div>
I want to only show the content in the div with id="intro", making sure that the .overlay and #sim div are not displayed. I would need to make appropriate CSS rules and use Javascript's element.add, remove, and contains so I can control which CSS rules are active.
I'm not entirely sure what this means and how it would look like.
What am I doing in my CSS file exactly?
javascript html css dom client-side
edited Nov 23 '18 at 22:17
Adriano
1,35711325
Possible duplicate of Show/hide 'div' using JavaScript
– estevan
Nov 23 '18 at 20:12
add a comment |
I'm new to Javascript DOM so I need a little bit of help walking through the basics before I can get going - I have an HTML file like this:
<div id="content">
<h1>FOREST SIMULATOR</h1>
<div id="intro">
starting forest (leave empty to randomize):
<br />
<textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
<br />
<button>generate</button>
</div>
<div id="sim" class="hidden"></div>
<div id="pushtray" class="overlay"></div>
</div>
I want to only show the content in the div with id="intro", making sure that the .overlay and #sim div are not displayed. I would need to make appropriate CSS rules and use Javascript's element.add, remove, and contains so I can control which CSS rules are active.
I'm not entirely sure what this means and how it would look like.
What am I doing in my CSS file exactly?
javascript html css dom client-side
edited Nov 23 '18 at 22:17
Adriano
1,35711325
I'm new to Javascript DOM so I need a little bit of help walking through the basics before I can get going - I have an HTML file like this:
<div id="content">
<h1>FOREST SIMULATOR</h1>
<div id="intro">
starting forest (leave empty to randomize):
<br />
<textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
<br />
<button>generate</button>
</div>
<div id="sim" class="hidden"></div>
<div id="pushtray" class="overlay"></div>
</div>
I want to only show the content in the div with id="intro", making sure that the .overlay and #sim div are not displayed. I would need to make appropriate CSS rules and use Javascript's element.add, remove, and contains so I can control which CSS rules are active.
I'm not entirely sure what this means and how it would look like.
What am I doing in my CSS file exactly?
javascript html css dom client-side
javascript html css dom client-side
edited Nov 23 '18 at 22:17
Adriano
1,35711325
edited Nov 23 '18 at 22:17
Adriano
1,35711325
edited Nov 23 '18 at 22:17
Adriano
1,35711325
edited Nov 23 '18 at 22:17
Adriano
1,35711325
edited Nov 23 '18 at 22:17
Adriano
1,35711325
1,35711325
asked Nov 23 '18 at 20:07
user10366926
Possible duplicate of Show/hide 'div' using JavaScript
– estevan
Nov 23 '18 at 20:12
add a comment |
Possible duplicate of Show/hide 'div' using JavaScript
– estevan
Nov 23 '18 at 20:12
Possible duplicate of Show/hide 'div' using JavaScript
– estevan
Nov 23 '18 at 20:12
Possible duplicate of Show/hide 'div' using JavaScript
– estevan
Nov 23 '18 at 20:12
add a comment |
4 Answers
4
active
oldest
votes
The following css hides all div elements in the content div. After that it will show the intro div.
Bound a click function to the "generate" button with Javascript to hide the intro div and show the sim div.
With some alterations you should be able to make it work to your liking.
//Wait for the dom to finish loading
document.addEventListener("DOMContentLoaded", function(){
//then bind a click event handler to all the buttons inside the div with the id intro
document.querySelector("div#intro button").addEventListener("click", function(){
//hide the intro div and show the sim div when the button is clicked
document.getElementById("intro").style.display = "none";
document.getElementById("sim").style.display = "block";
});
});div#content div {
display: none;
}
div#content div#intro {
display: block;
}<div id="content">
<h1>FOREST SIMULATOR</h1>
<div id="intro">
starting forest (leave empty to randomize):
<br />
<textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
<br />
<button>generate</button>
</div>
<div id="sim" class="hidden">lalala</div>
<div id="pushtray" class="overlay">lalala</div>
</div>answered Nov 23 '18 at 22:34
Mark BaijensMark Baijens
6,856103353
add a comment |
If you don't want to display the div elements with id "overlay" and "sim" you can write it as:
document.getElementById("sim").style.display="none";
document.getElementById("pushtray").style.display="none";
answered Nov 23 '18 at 20:17
Marko PanushkovskiMarko Panushkovski
111
So this goes in my Javascript file correct? How would my js file know what "document" is referring to? I'm using express-static to serve the html file, is that how it knows?
– user10366926
Nov 24 '18 at 0:26
It should be correct. Your javascript file does not have to know in which document it is used. You can attach it to every html file where it does the work correctly. In other words you can attach it this way: <head> <script src="theNameOfYourJsFile.js"></script> </head> and for every time your going to use the object document in your js file, it will always refer to the html file that it has been linked to
– Marko Panushkovski
Nov 24 '18 at 13:15
Ah right forgot about that
– user10366926
Nov 24 '18 at 18:06
Do you know why I'm getting a referenceError for document? In my html, it's written in the header <script src="sim.js"></script>. Yet when I type in node sim.js, it's giving me a referenceError at the part where I'm referencing document.
– user10366926
Nov 24 '18 at 20:16
Your html file and your javascript file have to be in the same folder, if they are not you should put them together (as well as the css and html files are together).
– Marko Panushkovski
Nov 24 '18 at 22:07
|
show 1 more comment
You should give the class hidden to any element you dont want visible (you can have any number of classes on an element), and then add a css rule that hides them:
<style>
.hidden{
display:none;
}
</style>
Then if you want to show these hidden element when some sort of action is taken, you use javascript to add and remove the hidden class respectively.
var element = document.getElementById("sim");
element.classList.remove("hidden")
answered Nov 23 '18 at 20:13
SpeedOfRoundSpeedOfRound
632314
add a comment |
This code hides the 'overlay' and 'pushtray' elements:
document.getElementById('overlay').style.display = 'none';
document.getElementById('pushtray').style.display = 'none' ;
This code hides only the content of the 'overlay' and 'pushtray' elements, but the elements are still "reserve" place in your page.
document.getElementById('overlay').style.visibility = 'hidden';
document.getElementById('pushtray').style.visibility= 'hidden' ;
answered Nov 23 '18 at 21:26
Bálint CséfalvayBálint Cséfalvay
649
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452424%2fonly-showing-a-div-with-a-certain-id-by-manipulating-css-file-and-my-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
The following css hides all div elements in the content div. After that it will show the intro div.
Bound a click function to the "generate" button with Javascript to hide the intro div and show the sim div.
With some alterations you should be able to make it work to your liking.
//Wait for the dom to finish loading
document.addEventListener("DOMContentLoaded", function(){
//then bind a click event handler to all the buttons inside the div with the id intro
document.querySelector("div#intro button").addEventListener("click", function(){
//hide the intro div and show the sim div when the button is clicked
document.getElementById("intro").style.display = "none";
document.getElementById("sim").style.display = "block";
});
});div#content div {
display: none;
}
div#content div#intro {
display: block;
}<div id="content">
<h1>FOREST SIMULATOR</h1>
<div id="intro">
starting forest (leave empty to randomize):
<br />
<textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
<br />
<button>generate</button>
</div>
<div id="sim" class="hidden">lalala</div>
<div id="pushtray" class="overlay">lalala</div>
</div>answered Nov 23 '18 at 22:34
Mark BaijensMark Baijens
6,856103353
add a comment |
The following css hides all div elements in the content div. After that it will show the intro div.
Bound a click function to the "generate" button with Javascript to hide the intro div and show the sim div.
With some alterations you should be able to make it work to your liking.
//Wait for the dom to finish loading
document.addEventListener("DOMContentLoaded", function(){
//then bind a click event handler to all the buttons inside the div with the id intro
document.querySelector("div#intro button").addEventListener("click", function(){
//hide the intro div and show the sim div when the button is clicked
document.getElementById("intro").style.display = "none";
document.getElementById("sim").style.display = "block";
});
});div#content div {
display: none;
}
div#content div#intro {
display: block;
}<div id="content">
<h1>FOREST SIMULATOR</h1>
<div id="intro">
starting forest (leave empty to randomize):
<br />
<textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
<br />
<button>generate</button>
</div>
<div id="sim" class="hidden">lalala</div>
<div id="pushtray" class="overlay">lalala</div>
</div>answered Nov 23 '18 at 22:34
Mark BaijensMark Baijens
6,856103353
add a comment |
The following css hides all div elements in the content div. After that it will show the intro div.
Bound a click function to the "generate" button with Javascript to hide the intro div and show the sim div.
With some alterations you should be able to make it work to your liking.
//Wait for the dom to finish loading
document.addEventListener("DOMContentLoaded", function(){
//then bind a click event handler to all the buttons inside the div with the id intro
document.querySelector("div#intro button").addEventListener("click", function(){
//hide the intro div and show the sim div when the button is clicked
document.getElementById("intro").style.display = "none";
document.getElementById("sim").style.display = "block";
});
});div#content div {
display: none;
}
div#content div#intro {
display: block;
}<div id="content">
<h1>FOREST SIMULATOR</h1>
<div id="intro">
starting forest (leave empty to randomize):
<br />
<textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
<br />
<button>generate</button>
</div>
<div id="sim" class="hidden">lalala</div>
<div id="pushtray" class="overlay">lalala</div>
</div>answered Nov 23 '18 at 22:34
Mark BaijensMark Baijens
6,856103353
The following css hides all div elements in the content div. After that it will show the intro div.
Bound a click function to the "generate" button with Javascript to hide the intro div and show the sim div.
With some alterations you should be able to make it work to your liking.
//Wait for the dom to finish loading
document.addEventListener("DOMContentLoaded", function(){
//then bind a click event handler to all the buttons inside the div with the id intro
document.querySelector("div#intro button").addEventListener("click", function(){
//hide the intro div and show the sim div when the button is clicked
document.getElementById("intro").style.display = "none";
document.getElementById("sim").style.display = "block";
});
});div#content div {
display: none;
}
div#content div#intro {
display: block;
}<div id="content">
<h1>FOREST SIMULATOR</h1>
<div id="intro">
starting forest (leave empty to randomize):
<br />
<textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
<br />
<button>generate</button>
</div>
<div id="sim" class="hidden">lalala</div>
<div id="pushtray" class="overlay">lalala</div>
</div>//Wait for the dom to finish loading
document.addEventListener("DOMContentLoaded", function(){
//then bind a click event handler to all the buttons inside the div with the id intro
document.querySelector("div#intro button").addEventListener("click", function(){
//hide the intro div and show the sim div when the button is clicked
document.getElementById("intro").style.display = "none";
document.getElementById("sim").style.display = "block";
});
});div#content div {
display: none;
}
div#content div#intro {
display: block;
}<div id="content">
<h1>FOREST SIMULATOR</h1>
<div id="intro">
starting forest (leave empty to randomize):
<br />
<textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
<br />
<button>generate</button>
</div>
<div id="sim" class="hidden">lalala</div>
<div id="pushtray" class="overlay">lalala</div>
</div>//Wait for the dom to finish loading
document.addEventListener("DOMContentLoaded", function(){
//then bind a click event handler to all the buttons inside the div with the id intro
document.querySelector("div#intro button").addEventListener("click", function(){
//hide the intro div and show the sim div when the button is clicked
document.getElementById("intro").style.display = "none";
document.getElementById("sim").style.display = "block";
});
});div#content div {
display: none;
}
div#content div#intro {
display: block;
}<div id="content">
<h1>FOREST SIMULATOR</h1>
<div id="intro">
starting forest (leave empty to randomize):
<br />
<textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
<br />
<button>generate</button>
</div>
<div id="sim" class="hidden">lalala</div>
<div id="pushtray" class="overlay">lalala</div>
</div>answered Nov 23 '18 at 22:34
Mark BaijensMark Baijens
6,856103353
edited Nov 23 '18 at 22:41
answered Nov 23 '18 at 22:34
Mark BaijensMark Baijens
6,856103353
answered Nov 23 '18 at 22:34
Mark BaijensMark Baijens
6,856103353
answered Nov 23 '18 at 22:34
Mark BaijensMark Baijens
6,856103353
6,856103353
add a comment |
add a comment |
If you don't want to display the div elements with id "overlay" and "sim" you can write it as:
document.getElementById("sim").style.display="none";
document.getElementById("pushtray").style.display="none";
answered Nov 23 '18 at 20:17
Marko PanushkovskiMarko Panushkovski
111
So this goes in my Javascript file correct? How would my js file know what "document" is referring to? I'm using express-static to serve the html file, is that how it knows?
– user10366926
Nov 24 '18 at 0:26
It should be correct. Your javascript file does not have to know in which document it is used. You can attach it to every html file where it does the work correctly. In other words you can attach it this way: <head> <script src="theNameOfYourJsFile.js"></script> </head> and for every time your going to use the object document in your js file, it will always refer to the html file that it has been linked to
– Marko Panushkovski
Nov 24 '18 at 13:15
Ah right forgot about that
– user10366926
Nov 24 '18 at 18:06
Do you know why I'm getting a referenceError for document? In my html, it's written in the header <script src="sim.js"></script>. Yet when I type in node sim.js, it's giving me a referenceError at the part where I'm referencing document.
– user10366926
Nov 24 '18 at 20:16
Your html file and your javascript file have to be in the same folder, if they are not you should put them together (as well as the css and html files are together).
– Marko Panushkovski
Nov 24 '18 at 22:07
|
show 1 more comment
If you don't want to display the div elements with id "overlay" and "sim" you can write it as:
document.getElementById("sim").style.display="none";
document.getElementById("pushtray").style.display="none";
answered Nov 23 '18 at 20:17
Marko PanushkovskiMarko Panushkovski
111
So this goes in my Javascript file correct? How would my js file know what "document" is referring to? I'm using express-static to serve the html file, is that how it knows?
– user10366926
Nov 24 '18 at 0:26
It should be correct. Your javascript file does not have to know in which document it is used. You can attach it to every html file where it does the work correctly. In other words you can attach it this way: <head> <script src="theNameOfYourJsFile.js"></script> </head> and for every time your going to use the object document in your js file, it will always refer to the html file that it has been linked to
– Marko Panushkovski
Nov 24 '18 at 13:15
Ah right forgot about that
– user10366926
Nov 24 '18 at 18:06
Do you know why I'm getting a referenceError for document? In my html, it's written in the header <script src="sim.js"></script>. Yet when I type in node sim.js, it's giving me a referenceError at the part where I'm referencing document.
– user10366926
Nov 24 '18 at 20:16
Your html file and your javascript file have to be in the same folder, if they are not you should put them together (as well as the css and html files are together).
– Marko Panushkovski
Nov 24 '18 at 22:07
|
show 1 more comment
If you don't want to display the div elements with id "overlay" and "sim" you can write it as:
document.getElementById("sim").style.display="none";
document.getElementById("pushtray").style.display="none";
answered Nov 23 '18 at 20:17
Marko PanushkovskiMarko Panushkovski
111
If you don't want to display the div elements with id "overlay" and "sim" you can write it as:
document.getElementById("sim").style.display="none";
document.getElementById("pushtray").style.display="none";
answered Nov 23 '18 at 20:17
Marko PanushkovskiMarko Panushkovski
111
answered Nov 23 '18 at 20:17
Marko PanushkovskiMarko Panushkovski
111
answered Nov 23 '18 at 20:17
Marko PanushkovskiMarko Panushkovski
111
answered Nov 23 '18 at 20:17
Marko PanushkovskiMarko Panushkovski
111
111
So this goes in my Javascript file correct? How would my js file know what "document" is referring to? I'm using express-static to serve the html file, is that how it knows?
– user10366926
Nov 24 '18 at 0:26
It should be correct. Your javascript file does not have to know in which document it is used. You can attach it to every html file where it does the work correctly. In other words you can attach it this way: <head> <script src="theNameOfYourJsFile.js"></script> </head> and for every time your going to use the object document in your js file, it will always refer to the html file that it has been linked to
– Marko Panushkovski
Nov 24 '18 at 13:15
Ah right forgot about that
– user10366926
Nov 24 '18 at 18:06
Do you know why I'm getting a referenceError for document? In my html, it's written in the header <script src="sim.js"></script>. Yet when I type in node sim.js, it's giving me a referenceError at the part where I'm referencing document.
– user10366926
Nov 24 '18 at 20:16
Your html file and your javascript file have to be in the same folder, if they are not you should put them together (as well as the css and html files are together).
– Marko Panushkovski
Nov 24 '18 at 22:07
|
show 1 more comment
So this goes in my Javascript file correct? How would my js file know what "document" is referring to? I'm using express-static to serve the html file, is that how it knows?
– user10366926
Nov 24 '18 at 0:26
It should be correct. Your javascript file does not have to know in which document it is used. You can attach it to every html file where it does the work correctly. In other words you can attach it this way: <head> <script src="theNameOfYourJsFile.js"></script> </head> and for every time your going to use the object document in your js file, it will always refer to the html file that it has been linked to
– Marko Panushkovski
Nov 24 '18 at 13:15
Ah right forgot about that
– user10366926
Nov 24 '18 at 18:06
Do you know why I'm getting a referenceError for document? In my html, it's written in the header <script src="sim.js"></script>. Yet when I type in node sim.js, it's giving me a referenceError at the part where I'm referencing document.
– user10366926
Nov 24 '18 at 20:16
Your html file and your javascript file have to be in the same folder, if they are not you should put them together (as well as the css and html files are together).
– Marko Panushkovski
Nov 24 '18 at 22:07
So this goes in my Javascript file correct? How would my js file know what "document" is referring to? I'm using express-static to serve the html file, is that how it knows?
– user10366926
Nov 24 '18 at 0:26
So this goes in my Javascript file correct? How would my js file know what "document" is referring to? I'm using express-static to serve the html file, is that how it knows?
– user10366926
Nov 24 '18 at 0:26
It should be correct. Your javascript file does not have to know in which document it is used. You can attach it to every html file where it does the work correctly. In other words you can attach it this way: <head> <script src="theNameOfYourJsFile.js"></script> </head> and for every time your going to use the object document in your js file, it will always refer to the html file that it has been linked to
– Marko Panushkovski
Nov 24 '18 at 13:15
It should be correct. Your javascript file does not have to know in which document it is used. You can attach it to every html file where it does the work correctly. In other words you can attach it this way: <head> <script src="theNameOfYourJsFile.js"></script> </head> and for every time your going to use the object document in your js file, it will always refer to the html file that it has been linked to
– Marko Panushkovski
Nov 24 '18 at 13:15
Ah right forgot about that
– user10366926
Nov 24 '18 at 18:06
Ah right forgot about that
– user10366926
Nov 24 '18 at 18:06
Do you know why I'm getting a referenceError for document? In my html, it's written in the header <script src="sim.js"></script>. Yet when I type in node sim.js, it's giving me a referenceError at the part where I'm referencing document.
– user10366926
Nov 24 '18 at 20:16
Do you know why I'm getting a referenceError for document? In my html, it's written in the header <script src="sim.js"></script>. Yet when I type in node sim.js, it's giving me a referenceError at the part where I'm referencing document.
– user10366926
Nov 24 '18 at 20:16
Your html file and your javascript file have to be in the same folder, if they are not you should put them together (as well as the css and html files are together).
– Marko Panushkovski
Nov 24 '18 at 22:07
Your html file and your javascript file have to be in the same folder, if they are not you should put them together (as well as the css and html files are together).
– Marko Panushkovski
Nov 24 '18 at 22:07
|
show 1 more comment
You should give the class hidden to any element you dont want visible (you can have any number of classes on an element), and then add a css rule that hides them:
<style>
.hidden{
display:none;
}
</style>
Then if you want to show these hidden element when some sort of action is taken, you use javascript to add and remove the hidden class respectively.
var element = document.getElementById("sim");
element.classList.remove("hidden")
answered Nov 23 '18 at 20:13
SpeedOfRoundSpeedOfRound
632314
add a comment |
You should give the class hidden to any element you dont want visible (you can have any number of classes on an element), and then add a css rule that hides them:
<style>
.hidden{
display:none;
}
</style>
Then if you want to show these hidden element when some sort of action is taken, you use javascript to add and remove the hidden class respectively.
var element = document.getElementById("sim");
element.classList.remove("hidden")
answered Nov 23 '18 at 20:13
SpeedOfRoundSpeedOfRound
632314
add a comment |
You should give the class hidden to any element you dont want visible (you can have any number of classes on an element), and then add a css rule that hides them:
<style>
.hidden{
display:none;
}
</style>
Then if you want to show these hidden element when some sort of action is taken, you use javascript to add and remove the hidden class respectively.
var element = document.getElementById("sim");
element.classList.remove("hidden")
answered Nov 23 '18 at 20:13
SpeedOfRoundSpeedOfRound
632314
You should give the class hidden to any element you dont want visible (you can have any number of classes on an element), and then add a css rule that hides them:
<style>
.hidden{
display:none;
}
</style>
Then if you want to show these hidden element when some sort of action is taken, you use javascript to add and remove the hidden class respectively.
var element = document.getElementById("sim");
element.classList.remove("hidden")
answered Nov 23 '18 at 20:13
SpeedOfRoundSpeedOfRound
632314
answered Nov 23 '18 at 20:13
SpeedOfRoundSpeedOfRound
632314
answered Nov 23 '18 at 20:13
SpeedOfRoundSpeedOfRound
632314
answered Nov 23 '18 at 20:13
SpeedOfRoundSpeedOfRound
632314
632314
add a comment |
add a comment |
This code hides the 'overlay' and 'pushtray' elements:
document.getElementById('overlay').style.display = 'none';
document.getElementById('pushtray').style.display = 'none' ;
This code hides only the content of the 'overlay' and 'pushtray' elements, but the elements are still "reserve" place in your page.
document.getElementById('overlay').style.visibility = 'hidden';
document.getElementById('pushtray').style.visibility= 'hidden' ;
answered Nov 23 '18 at 21:26
Bálint CséfalvayBálint Cséfalvay
649
add a comment |
This code hides the 'overlay' and 'pushtray' elements:
document.getElementById('overlay').style.display = 'none';
document.getElementById('pushtray').style.display = 'none' ;
This code hides only the content of the 'overlay' and 'pushtray' elements, but the elements are still "reserve" place in your page.
document.getElementById('overlay').style.visibility = 'hidden';
document.getElementById('pushtray').style.visibility= 'hidden' ;
answered Nov 23 '18 at 21:26
Bálint CséfalvayBálint Cséfalvay
649
add a comment |
This code hides the 'overlay' and 'pushtray' elements:
document.getElementById('overlay').style.display = 'none';
document.getElementById('pushtray').style.display = 'none' ;
This code hides only the content of the 'overlay' and 'pushtray' elements, but the elements are still "reserve" place in your page.
document.getElementById('overlay').style.visibility = 'hidden';
document.getElementById('pushtray').style.visibility= 'hidden' ;
answered Nov 23 '18 at 21:26
Bálint CséfalvayBálint Cséfalvay
649
This code hides the 'overlay' and 'pushtray' elements:
document.getElementById('overlay').style.display = 'none';
document.getElementById('pushtray').style.display = 'none' ;
This code hides only the content of the 'overlay' and 'pushtray' elements, but the elements are still "reserve" place in your page.
document.getElementById('overlay').style.visibility = 'hidden';
document.getElementById('pushtray').style.visibility= 'hidden' ;
answered Nov 23 '18 at 21:26
Bálint CséfalvayBálint Cséfalvay
649
edited Nov 23 '18 at 21:32
answered Nov 23 '18 at 21:26
Bálint CséfalvayBálint Cséfalvay
649
answered Nov 23 '18 at 21:26
Bálint CséfalvayBálint Cséfalvay
649
answered Nov 23 '18 at 21:26
Bálint CséfalvayBálint Cséfalvay
649
649
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452424%2fonly-showing-a-div-with-a-certain-id-by-manipulating-css-file-and-my-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Possible duplicate of Show/hide 'div' using JavaScript
– estevan
Nov 23 '18 at 20:12