I am trying to initially hide MyDiv. Then it is revealed on the click with toggle functions. However, I cannot initially hide it.
<button onclick="myFunction()">Click Me</button>
This is my DIV element.
<script>function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
Here is a better way:
CSS
.hide{
display: none;
}
HTML
<button onclick="myFunction()">Click Me</button>
<div id="my_div" class="hide"></div>
JS
function myFunction() {
var myDiv = document.getElementById('my_div');
myDiv.classList.toggle("hide");
}
This works!
var x = document.getElementById('myDIV');
function myFunction() {
if (x.style.display === 'block') {
x.style.display = 'none';
} else {
x.style.display = 'block';
}
}
#myDIV{
display: none;
}
<button onclick="myFunction()">Click me</button>
<div id="myDIV">Hello world!</div>
Or you could do this (not much of a difference):
var x = document.getElementById('myDIV');
function myFunction() {
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
<button onclick="myFunction()">Click me</button>
<div id="myDIV" style='display: none'>Hello world!</div>
EDIT :
This way you can send the div's ID to the function:
function myFunction(id) {
var x = document.getElementById(id);
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
<button onclick="myFunction('myDIV')">Click me</button>
<div id="myDIV" style='display: none'>Hello world!</div>
<br />
<button onclick="myFunction('myDIV2')">Click me</button>
<div id="myDIV2" style='display: none'>Hello world!</div>
Try using CSS to hide it initially
<div id="myDIV" style="display: none;">Some DIV content</div>
Related
This question already has answers here:
How can I hide/show a div when a button is clicked?
(9 answers)
Closed 2 years ago.
Please can someone explain this situation?
I want to use the same function (hide/show) for more buttons. How can I call the same function with different buttons?
I found how to do it with one but can't find any solution for 2 or more buttons.
I would like to hide div1 if I click on bt1 and hide div2 if I click on bt2. Thank you for any help...
My current code is:
function myFunction() {
var x = document.getElementById("div1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<html>
<body>
<button id="bt1" onclick="myFunction()">Button 1</button>
<div id="div1">div1</div>
<p></p>
<button id="bt2" onclick="myFunction()">Button 2</button>
<div id="div2">div2</div>
</body>
</html>
Thank you for your help...
You could pass the ID of the div to your function as a parameter:
function myFunction(el) {
var x = document.getElementById(el);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button id="bt1" onclick="myFunction('div1')">Button 1</button>
<div id="div1">div1</div>
<p></p>
<button id="bt2" onclick="myFunction('div2')">Button 2</button>
<div id="div2">div2</div>
One way is to pass the ID of the DIV as a function parameter.
function myFunction(id) {
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<html>
<body>
<button id="bt1" onclick="myFunction('div1')">Button 1</button>
<div id="div1">div1</div>
<p></p>
<button id="bt2" onclick="myFunction('div2')">Button 2</button>
<div id="div2">div2</div>
</body>
</html>
Another way is to pass the button itself, and use DOM navigation, if the DIV to hide and show is always right after the button.
function myFunction(button) {
var x = button.nextElementSibling;
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<html>
<body>
<button id="bt1" onclick="myFunction(this)">Button 1</button>
<div id="div1">div1</div>
<p></p>
<button id="bt2" onclick="myFunction(this)">Button 2</button>
<div id="div2">div2</div>
</body>
</html>
I would do it like so:
Add a data-attribute like data-js-hide="div1"
Add a click event listener for all those elements having the attribute data-js-hide
when clicked use the value "div1" from the attribute data-js-hide
The advantages are that it does not matter where in DOM the elements are. You just need to set the attribute with id, and then on click the item with the id will be hidden or shown accordingly.
function myFunction(event) {
var x = document.getElementById(event.target.dataset.jsHide);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
var buttons = document.querySelectorAll('[data-js-hide]');
buttons.forEach(
button => {
button.addEventListener('click', myFunction);
}
);
<html>
<body>
<button data-js-hide="div1" >Button 1</button>
<div id="div1">div1</div>
<p></p>
<button data-js-hide="div2">Button 2</button>
<div id="div2">div2</div>
<p></p>
<button data-js-hide="div3">Button 3</button>
<div id="div3">div3</div>
</body>
</html>
I want my function(dropFunction(), which makes the div #dropdownList appear) to run on the first click of my button(#drop-btn), however, I must click it twice for the function to run, but only the first time. After this first double click, it runs as it should. How do I make it so it runs on the first click, rather than the second this first time?
CSS:
function dropFunction() {
var x = document.getElementById("dropdownList")
if (x.style.display === "none") {
x.style.display = "block"
} else {
x.style.display = "none"
}
}
#dropdownList {
display:none;
}
<div class="dropdown">
<button onclick = "dropFunction()" class="drop-btn">Menu</button>
<div id="dropdownList">
Link 1
Link 2
Link 3
</div>
</div>
You have to use window.getComputedStyle(x) to get the value from the CSS
function dropFunction() {
var x = document.getElementById("dropdownList")
if (window.getComputedStyle(x).display === "none") {
x.style.display = "block"
} else {
x.style.display = "none"
}
}
#dropdownList {
display:none;
}
<div class="dropdown">
<button onclick = "dropFunction()" class="drop-btn">Menu</button>
<div id="dropdownList">
Link 1
Link 2
Link 3
</div>
</div>
You can use 2 solutions.
1.
if(x.style.display === "none")
=>
if(window.getComputedStyle(x).display === "none")
or
2.
<div id="dropdownList">
=>
<div id="dropdownList" style="display: none;">
function dropFunction() {
var x = document.getElementById("dropdownList")
if (window.getComputedStyle(x).display === "none") {
x.style.display = "block"
} else {
x.style.display = "none"
}
}
#dropdownList {
display:none;
}
<div class="dropdown">
<button onclick = "dropFunction()" class="drop-btn">Menu</button>
<div id="dropdownList">
Link 1
Link 2
Link 3
</div>
</div>
function dropFunction() {
var x = document.getElementById("dropdownList")
if (x.style.display === "none") {
x.style.display = "block"
} else {
x.style.display = "none"
}
}
#dropdownList {
display:none;
}
<div class="dropdown">
<button onclick = "dropFunction()" class="drop-btn">Menu</button>
<div id="dropdownList" style="display:none;">
Link 1
Link 2
Link 3
</div>
</div>
I'm trying to make a container with 4 buttons in it and I wan't to toggle them between each other. Currently toggle is works when I double click the button (1click - show, 2click -hide) But when I click another button with toggle option the button shows information about another one.
How i can make button toggle when i click another button but not the same one.
<div class="newsFeedButtons">
<button class="btn" id="searchbtn" onclick="searchFeed()">Search</button>
<button class="btn" id="cryptobtn" onclick="cryptoFeed()">Crypto</button>
<button class="btn" onclick="twitterFeed()">Twitter</button>
</div>
<div id="twitterDIV" style="display: none;">
<a class="twitter-timeline" data-width="550" data-
height="400" href="https://twitter.com/Bitcoin?
ref_src=twsrc%5Etfw">Tweets by Bitcoin</a>
<script async
src="https://platform.twitter.com/widgets.js" charset="utf-8">.
</script>
</div>
<div class="row">
<div id="newsResult"></div>
</div>
JavaScript code:
function twitterFeed() {
var x = document.getElementById("twitterDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
$(function() {
$("form").submit(function() {
return false;
});
});
function searchFeed() {
var x = document.getElementById("newsResult");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
$(function() {
$("form").submit(function() {
return false;
});
});
A kind of simple toggling you can use on other elements, too:
function showContent() {
$('[data-show]').each(function(e) {
var thisButton = $(this);
var thisTarget = $( thisButton.data('show') );
thisTarget.toggleClass('active', thisButton.hasClass('active'));
});
};
showContent();
$('[data-show]').on('click', function(e) {
e.preventDefault();
var thisButton = $(this);
thisButton.siblings().removeClass('active');
thisButton.addClass('active');
showContent();
});
.newsFeedButtons .active {
border-color: red;
}
.newsFeedContent > div {
display: none;
}
.newsFeedContent > div.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newsFeedButtons">
<button class="btn active" data-show="#searchDiv">Search</button>
<button class="btn" data-show="#cryptoDIV">Crypto</button>
<button class="btn" data-show="#twitterDIV">Twitter</button>
</div>
<div class="newsFeedContent">
<div id="searchDiv">Search...</div>
<div id="cryptoDIV">Crypto...</div>
<div id="twitterDIV">Twitter...</div>
</div>
Also on JSFiddle
Explanation
Everytime when you click a button it display a particular div to block.
But when you click other button previous div style remains display:block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="newsFeedButtons">
<button class="btn" id="searchbtn" onclick="searchFeed()">Search</button>
<button class="btn" id="cryptobtn" onclick="cryptoFeed()">Crypto</button>
<button class="btn" id="twitterbtn" onclick="twitterFeed()">Twitter</button>
</div>
<div id="twitterDIV" style="display: none;">
<a class="twitter-timeline" data-width="550" data-
height="400" href="https://twitter.com/Bitcoin?
ref_src=twsrc%5Etfw">Tweets by Bitcoin</a>
</div>
<div class="row">
<div id="newsResult" style="display:none">News result div</div>
</div>
<div class="row">
<div id="cryptoDIV" style="display:none">Crypto div</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
function twitterFeed() {
var x = document.getElementById("twitterDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
document.getElementById("newsResult").style="display:none";
document.getElementById("cryptoDIV").style="display:none";
}
$(function() {
$("form").submit(function() {
return false;
});
});
function searchFeed() {
var x = document.getElementById("newsResult");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
document.getElementById("twitterDIV").style="display:none";
document.getElementById("cryptoDIV").style="display:none";
}
function cryptoFeed() {
var x = document.getElementById("cryptoDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
document.getElementById("twitterDIV").style="display:none";
document.getElementById("newsResult").style="display:none";
}
$(function() {
$("form").submit(function() {
return false;
});
});
</script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
I have come up with this not very nice solution for having 7 buttons and information appearing in a div. However I would like the open div to close when a new button is clicked. also my solution is very repetition.
javascript code ...lengthy solution for accessing each div with each button...working separately
function myRoot() {
var x = document.getElementById("root");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function mySacral() {
var x = document.getElementById("sacral");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function mySolar() {
var x = document.getElementById("solar");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myHeart() {
var x = document.getElementById("heart");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myThroat() {
var x = document.getElementById("throat");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myBrow() {
var x = document.getElementById("brow");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myCrown() {
var x = document.getElementById("crown");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<script src="Myscript.js"></script>
<div class="chakra">
<button class="chbtn" onclick="myRoot()"><img src="Images/root.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="mySacral()"><img src="Images/sacral.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="mySolar()"><img src="Images/solar.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="myHeart()"><img src="Images/heart.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="myThroat()"><img src="Images/throat.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="myBrow()"><img src="Images/brow.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="myCrown()"><img src="Images/crown.png"></button>
</div>
</div>
<div class="pic-holder">
<h3>Chakra information</h3>
<div class="info" id="root"><img src="Images/root.png"> The root Chakra</br>
<p>Lorem </p>
<p>Lorem ipsum, dolor sit </p>
</div>
<div class="info" id="sacral"><img src="Images/sacral.png"> The sacral Chakra</br>
<p>Lorem blah blahipsum blah blah</p>
</div>
so.. here is a simple code to show how to proceed, with a small css part
var
Elm_Id_Block = '',
elms_xx = document.querySelectorAll('#elmsGroup > div')
;
// init
elms_xx[0].style.display = "block";
Elm_Id_Block = elms_xx[0].id;
document.querySelector("#buttonsGroup").onclick = function (e) {
if (!e.target.matches('button')) return;
e.stopPropagation();
let ref = e.target.dataset.ref;
if (ref != Elm_Id_Block) {
document.getElementById(ref).style.display = "block";
document.getElementById(Elm_Id_Block).style.display = "none";
Elm_Id_Block = ref;
}
}
#elmsGroup>div {
display: none;
width: 300px;
height: 30px;
padding: 5px;
border: 1px solid lightblue;
margin: 5px;
}
<div id="buttonsGroup">
<button data-ref="elm-A">A</button>
<button data-ref="elm-B">B</button>
<button data-ref="elm-C">C</button>
<button data-ref="elm-D">D</button>
<button data-ref="elm-E">E</button>
</div>
<div id="elmsGroup">
<div id="elm-A"> elm-A </div>
<div id="elm-B"> elm-B </div>
<div id="elm-C"> elm-C </div>
<div id="elm-D"> elm-D </div>
<div id="elm-E"> elm-E </div>
</div>
This is probably very simple but I'm at a loss.
I have two anchors that toggle the display of their own div containers. Right now, you can have both div containers showing by clicking each button once. I would like only one div showing at a time.
So if you select button 1 to show div 1, then you select button 2, it will show div 2 but also hide div 1.
Here is my code:
<script type="text/javascript" language="JavaScript">
function ReverseDisplay(d)
{
if(document.getElementById(d).style.display == "none")
{ document.getElementById(d).style.display = "block"; }
else
{ document.getElementById(d).style.display = "none"; }
}
</script>
<a id="menus" href="javascript:ReverseDisplay('menuList')">Button 1</a>
<a id="reso" href="javascript:ReverseDisplay('resoList')">Button 2</a>
<p>Some content</p>
<div id="menuList" style="display:none;">Some content</div>
<div id="resoList" style="display:none;">Some content</div>
Give div's common class
<div id="menuList" class="content" style="display:none;">Some content 1</div>
<div id="resoList" class="content" style="display:none;">Some content 2</div>
And then hide all before showing specific:
function ReverseDisplay(d) {
[].slice.call(document.querySelectorAll('.content')).forEach(function(el) {
el.style.display = 'none';
});
var element = document.getElementById(d);
element.style.display = element.style.display == "none" ? "block" : "none";
}
Check the demo below.
function ReverseDisplay(d) {
[].slice.call(document.querySelectorAll('.content')).forEach(function(el) {
el.style.display = 'none';
});
var element = document.getElementById(d);
element.style.display = element.style.display == "none" ? "block" : "none";
}
.content {
padding: 10px;
background: #EEE;
}
<a id="menus" href="javascript:ReverseDisplay('menuList')">Button 1</a>
<a id="reso" href="javascript:ReverseDisplay('resoList')">Button 2</a>
<p>Some content</p>
<div id="menuList" class="content" style="display:none;">Some content 1</div>
<div id="resoList" class="content" style="display:none;">Some content 2</div>
A bit more digging and I found a solution:
<script type="text/javascript" language="JavaScript">
(function() {
var opened_element = null;
window.ReverseDisplay = function(d) {
var e = document.getElementById(d);
if (opened_element && opened_element !== e) {
opened_element.style.display = 'none';
}
if(e.style.display == 'block') {
e.style.display = 'none';
}
else {
e.style.display = 'block';
}
opened_element = e;
};
}());</script>
You could
function ReverseDisplay(d) {
var el = document.getElementById(d),
els = document.getElementsByClassName('list'),
c;
for (var i = 0; i < els.length; i++) {
c = els[i];
if (el == c) {
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
} else {
c.style.display = "none";
}
}
}
.list {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="menus" href="javascript:ReverseDisplay('menuList')">Button 1</a>
<a id="reso" href="javascript:ReverseDisplay('resoList')">Button 2</a>
<p>Some content</p>
<div id="menuList" class="list">Some content 1</div>
<div id="resoList" class="list">Some content 2</div>
Here is jQuery for those that could use this:
function hideTarget(elem){
$(elem).hide();
}
function showTarget(elem, target, hideThis){
$(elem).click(function(){
$(target).show();
hideTarget(hideThis);
});
}
showTarget('#reso','#resoList','#menuList');
showTarget('#menus','#menuList','#resoList');
Here is the fiddle.