How to toggle a div after clicking javascript/html - javascript

I'm trying to use a div to show game rules, so when they select the "button" it will reveal the rules, but I can't get it to close by reselecting it. I have tried a few other solutions but they are not quite what I am looking for.
<script type="text/javascript">
function showDiv() {
document.getElementById('howto').style.display = "block";
}
</script>
<input type="button" name="rules" value="How to Play!" onclick="showDiv()" />
<div id="howto" style="display:none;" class="rules" > WELCOME</div>

You could have a toggleDiv rather than showDiv function that checks the display style and sets it to whichever of block or none it is not currently set to. For example:
<script type="text/javascript">
function toggleDiv() {
var div = document.getElementById('howto');
div.style.display = (div.style.display == "block") ? "none" : "block";
}
</script>
<input type="button" name="rules" value="How to Play!" onclick="toggleDiv()" />
<div id="howto" style="display:none;" class="rules" > WELCOME</div>

Related

Hide div after showing it with javascript

I'm using javascript to show a hidden div by clicking a button. After the div is displayed, I want to be able to click the button again and hide the div, and so on...
Here is my javascript:
<script type="text/javascript">
function showDiv() {
document.getElementById('dropdownText').style.display = "block";
}
</script>
This is the button:
<input type="button" name="answer" value="+" onclick="showDiv()" />
This is the hidden div:
<div id="dropdownText" style="display:none;">
This is the dropdown text.
</div>
You can e.g. bind specified class to the element and just toggle it.
function showDiv() {
document.getElementById('dropdownText').classList.toggle("hidden");
}
.hidden {
display: none;
}
<input type="button" name="answer" value="+" onclick="showDiv()" />
This is the hidden div:
<div id="dropdownText" class='hidden'>
This is the dropdown text.
</div>
If you tagged this question with jQuery as well, so I guess you could use the .toggle function, like this -
$('#answer').click(function() {
$('#dropdownText').toggle();
}
If you want to stick up with javascript only, your showDiv() function should look like this -
function showDiv() {
let text = document.getElementById('dropdownText');
if (text.style.display === 'none') {
text.style.display = 'block';
}
else {
text.style.display = 'none';
}
}
You should capture the current style every time a button is clicked, since you want to 'toggle' it back to the opposite state.
You simply need to do this:
const drop = document.getElementById('dropdownText')
const toggleDropdown = _ => {
const cl = drop.classList
cl.contains('hide')?cl.remove('hide'):cl.add('hide')
}
#dropdownText.hide {display:none}
/* DropDown Styles for this demo */
#dropdownText {width: 10em; height: 4em; background: green}
<button onclick='toggleDropdown()'>Toggle Div</button>
<div id='dropdownText'></div>
Note: Click Run Code Snippet to see the code in action.
The way it works is by detecting if it has the hide class and based on that, toggle that class.
The actual hiding and showing is done via CSS!
<div id="dropdownText" style="display:none">
This is the dropdown text.
</div>
<script type="text/javascript">
function showDiv() {
var x = document.getElementById('dropdownText');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>

Replace show hide button with div

Javascript:
<script>
function setVisibility(id) {
if (document.getElementById('bt1').value == 'Hide Layer') {
document.getElementById('bt1').value = 'Show Layer';
document.getElementById(id).style.display = 'none';
} else {
document.getElementById('bt1').value = 'Hide Layer';
document.getElementById(id).style.display = 'inline';
}
}
</script>
css
div {
display: none;
}
HTML
<input type=button name=type id='bt1' value='Show Layer' onClick="setVisibility('sub3');";>
<div id="sub3">Message Box</div>
This code works perfectly .. But when i click on the button it shows the message box along with the button 'Hide Layer' .. i want my message box to replace the button 'hide layer' n display in it's place..
If you want to render message box only.Please refers following steps-
step 1- Add following code into the HTML file
<input type=button name=type id='bt1' value='Show Layer' onClick="setVisibility('sub3');";>
<div id="sub3">Message Box</div>
<script>
function setVisibility(id) {
if (document.getElementById('bt1').value == 'Show Layer') {
document.getElementById(id).style.display = 'inline';
//above statement will show message box.
document.getElementById('bt1').style.display = 'none';
//above statement will hide 'Show layer' button.
}
}
</script>
step 2- add following code to the css
div {
display: none;
}
To check example please refer this link-https://jsfiddle.net/yndyn8vj/
You should do something like this.
HTML
<input type=button name=type id='bt1' value='Show Layer' onClick="setVisibility('sub3');";>
<div id="sub3" style="display:none">Message Box</div>
CSS - nothing
Javascript
<script>
function setVisibility(id) {
var el = document.getElementById(id);
el.style.display = (el.style.display != 'none' ? 'none' : '');
}
</script>
Hope it helps.
Marco.

after button clicked set "display:none"

When I click the show/hide buttons above the tag, it works fine. But for the button below that (front full) it won't hide the contents of the tag. If i move the button above the beginning tag it will work. How can I get it to link to the hide tag above it?
<input type="button" onclick="show(this);" value="show"/>
<input type="button" onclick="hide(this);" value="hide"/>
<hide class="inner" style="display.none;">
<input type="button" onclick="showSpoiler1(this);" value="Front flip variaion (ramp)" />
<input type="button" onclick="showSpoiler2(this);" value="Front flip variaion (flat)" />
<input type="button" onclick="showSpoiler3(this);" value="Backflip variations" />
<input type="button" onclick="showSpoiler4(this);" value="Sideflip Variations (ramp)" />
<input type="button" onclick="showSpoiler5(this);" value="Twists and other tricks" />
<div1 class="inner" style="display:none;">
<ul>
<input type="button" onclick="hide(this);" value="Front full"/>
<li>Double Front</li>
<li>Aerial Twist</li>
</ul>
</div1>
</hide>
JS
function show(obj)
{
var inner = obj.parentNode.getElementsByTagName("hide")[0];
inner.style.display = "";
}
function hide(obj)
{
var inner = obj.parentNode.getElementsByTagName("hide")[0];
inner.style.display = "none";
}
In the buttons below, you have:
<div1 class="inner" style="display:none;">
<ul>
<input type="button" onclick="hide(this);" value="Front full"/>
<li>Double Front</li>
then in the function:
function show(obj)
{
var inner = obj.parentNode.getElementsByTagName("hide")[0];
So when you click on the button, obj is a reference to the button. It's parent node will be an LI that will be inserted by error correction (since a button can't be a child of a UL element). That parent node doesn't have a child "hide" element.
Even if the button was a child of the UL, it doesn't have any hide children either. Consider instead:
var inner = document.getElementsByTagName("hide")[0];
you can't you the same hide() function for both buttons , as what it does is pretty specific as to what it hides. why don't you try something like :
function hideParent(obj)
{
var inner = obj.parentNode.parentNode;
inner.style.display = "none";
}
<hide class="inner" style="display.none;">
...
<div1 class="inner" style="display:none;"> // <- assuming this is what this supposed to nbe hidden
<ul>
<input type="button" onclick="hideParent(this);" value="Front full"/>
<li>Double Front</li>
<li>Aerial Twist</li>
</ul>
</div1>
</hide>
if all the buttons are supposed to hide the same thing - the <hide> element then do something like this:
function hide(obj)
{
var inner = getElementbyTagName("body").getElementsByTagName("hide")[0];
inner.style.display = "none";
}
like the other comments suggest , don't use <hide> just use <div> then use getElementById
Your hide and show functions look for hide tags that are children of the button's parent, i.e. siblings of the button. The parent of the button is the div, and the parent of the div is the hide.
If you want the button to affect the hide element that contains it, try hide(this.parentNode.parentNode)
Or, you could change the hide/show functions to iterate progressively higher in the DOM hierarchy until it finds a hide element, so it will work for siblings, parents, and siblings of parents. Perhaps something like:
function hide(obj)
{
if (obj !== document)
{
var parent = obj.parentNode;
var inner = parent.getElementsByTagName("hide");
if (inner.length > 0)
{
inner[0].style.disply = "none";
} else {
hide(parent)
}
}
}

Hide/unhide div with button?

<h1>Welcome! Chat now!</h1>
<button id="button">Chat Now</button>
<button id="buttontwo">Chat Categories</button>
<div id="login" style="visibility:hidden">
<button id="closelogin">Close</button>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
When the chat now button is pressed, I want to make the div "login" appear, and when the "closelogin" button inside the div is pressed, I want to make the whole div hidden again. Currently if no buttons are pressed the div should be at hidden state, cheers!
Use jQuery. No way to do it plain html/css.
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
If you don't have jQuery included, use javascript:
document.getElementById('button').onclick = function() {
document.getElementById('login').style.visibility = 'visible';
}
document.getElementById('closelogin').onclick = function() {
document.getElementById('login').style.visibility = 'hidden';
}
Look at my example without using of JavaScript.
<input type="checkbox" id="box"/>
<label id="container" for="box">
<div id="button">Chat Now</div>
<div id="login">
<label for="box" id="closelogin">Close</label>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
</label>
and css
#box{display: none;}
#container #login{ display: none;}
#box:checked + #container #login{ display: block;}
Fiddle http://jsfiddle.net/LUdyb/1/
Hope this help.
Using javascript with the help of the button id you can make the div to be hidden by changing the css property to visible. while using jquery you can use toggle,hide,show.
There is no way you can do this in html/css
You can use Jquery
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
to close
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
you just need to change the ID that is #closelogin and the .css('visibility', 'hidden')
You need to include Jquery library like this in your head or bottom of your page to make it work.
eg:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

document.getElementById(id) and toggling multiple ids

I have this simple function which toggles a hidden element in the webpage.
function showtable(id)
{
if(document.getElementById(id).style.display == 'block')
{
document.getElementById(id).style.display = 'none';
}else{
document.getElementById(id).style.display = 'block';
}
}
<input type="button" value="Toggle" onclick="showtable('id');" />
This works fine, but I want to toggle off some other (table) element (with certain ids) (except for the one which is being toggled, whether on or off) on the page every time the button is clicked.
You could use jQuery, but if you don't want to use that; here is a pure javascript example. To see how it works, copy paste it in a text file, save it as test.htm and open it in a browser. It contains three tables, each with a button above it. When clicking a button, it's table gets displayed and all other tables get hidden. If you need more tables, give them an id, and add their id to the array in the function:
var ids = ["redTable", "greenTable", "blackTable", "anotherTable"];
If you want to be able to toggle that table also, it will off course also need a button:
<input type="button" value="Toggle Green Table" onclick="showtable('anotherTable');" />
example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showtable(id) {
var ids = ["redTable", "greenTable", "blackTable"];
for(var i = 0; i < ids.length; i++) {
if(ids[i] != id)
document.getElementById(ids[i]).style.display = "none";
}
document.getElementById(id).style.display = "block";
}
</script>
</head>
<body>
<input type="button" value="Toggle Red Table" onclick="showtable('redTable');" /><br />
<table style="width: 100px; height: 100px; background-color: red;" id="redTable">
<tr>
<td>redTable</td>
</tr>
</table>
<input type="button" value="Toggle Green Table" onclick="showtable('greenTable');" /><br />
<table style="width: 100px; height: 100px; background-color: green; display: none;" id="greenTable">
<tr>
<td>greenTable</td>
</tr>
</table>
<input type="button" value="Toggle Black Table" onclick="showtable('blackTable');" /><br />
<table style="width: 100px; height: 100px; background-color: black; display: none;" id="blackTable">
<tr>
<td>blackTable</td>
</tr>
</table>
</body>
</html>
You could select all the other DOM elements, set their display attribute to "none", and then only show the one that should be visible.
Another way would be to keep track of the visible element in a variable:
var visibleElement = null;
When you toggle an element, you make that one the visible element and hide the previously visible one:
// Hide the previously visible element, if any.
if (visibleElement != null)
{
visibleElement.style.display = 'none';
}
// Make your new element the visible one.
visibleElement = document.getElementById(id)
visibleElement.style.display = 'block';
Easy using jQuery. For example, give each toggled element a class like toggle_element and then in JS:
$('.toggle_element').hide();
$('#id').show();
This will hide all elements with class toggle_element and show element with id id.
JSFiddle example here.

Categories