Develop Reference

Toggle show/hide functions between multiple divs

I have a page on my site which has 3 separate 'hidden' divs. Each with it's own 'show/hide' button.
Currently... each div and button set functions independently.
Therefore... if all divs are shown (open) at the same time, they stack according to their respective order.
Instead of that, I would rather restrict the function a bit, so that only div can be shown (open) at a time.
Example: If Div 1 is shown, and the user then clicks the Div 2 (or Dive 3) button, Div 1 (or which ever div is open at the time, will close.
I am not sure how to adjust my code to make that all work together. I have tried a few ideas, but they were all duds. So I posted a generic 'independent' version below.
function show_Div_1() {
var div1 = document.getElementById("Div_1");
if (div1.style.display === "none") {
div1.style.display = "block";
} else {
div1.style.display = "none";
}
}
function show_Div_2() {
var div2 = document.getElementById("Div_2");
if (div2.style.display === "none") {
div2.style.display = "block";
} else {
div2.style.display = "none";
}
}
function show_Div_3() {
var div3 = document.getElementById("Div_3");
if (div3.style.display === "none") {
div3.style.display = "block";
} else {
div3.style.display = "none";
}
}
.div {
width: 270px;
height: 30px;
padding-left: 10px;
}
<button type="button" onclick="show_Div_1()">Div 1 - Red</button>
<button type="button" onclick="show_Div_2()" style="margin-left: 4px">Div 2 - Blue</button>
<button type="button" onclick="show_Div_3()" style="margin-left: 4px">Div 3 - Green</button>
<div id="Div_1" class="div" style="background-color:red; display: none;"></div>
<div id="Div_2" class="div" style="background-color:blue; display: none;"></div>
<div id="Div_3" class="div" style="background-color:green; display: none;"></div>

I would suggest using data attributes for a toggle. Why? you can use CSS for them and you can use more than just a toggle - multiple "values".
Here in this example I do your "click" but also added a double click on the button for a third value. Try some clicks and double clicks!
A bit of overkill perhaps but more than just "toggle" for example you could use this to show "states" of things like a stoplight or any number of things.
Use the grid display and move them by just adding a data attribute value and double click it to get it to go (using css) to some grid-area:, things like that.
const hideValues = {
hide: "hidden",
show: "showme",
double: "dblclick"
};
function dblClickHander(event) {
const targetSelecor = event.target.dataset.target;
const target = document.querySelector(targetSelecor);
const action = target.dataset.hideme == hideValues.double ? hideValues.hide : hideValues.double;
const toggleTargets = document.querySelectorAll('.toggle-target');
toggleTargets.forEach(el => {
el.dataset.hideme = hideValues.hide;
});
target.dataset.hideme = action;
}
function toggleEventHandler(event) {
const targetSelecor = event.target.dataset.target;
const target = document.querySelector(targetSelecor);
const showHide = target.dataset.hideme == hideValues.hide ? hideValues.show : hideValues.hide;
const toggleTargets = document.querySelectorAll('.toggle-target');
toggleTargets.forEach(el => {
el.dataset.hideme = hideValues.hide;
});
target.dataset.hideme = showHide;
}
/* set up event handlers on the buttons */
const options = {
capture: true
};
/* we do this first to prevent the click from happening */
const toggleButtons = document.querySelectorAll('.toggle-button');
toggleButtons.forEach(el => {
el.addEventListener('dblclick', dblClickHander, options);
});
toggleButtons.forEach(el => {
el.addEventListener('click', toggleEventHandler, options)
});
.toggle-target {
width: 270px;
height: 30px;
padding-left: 10px;
}
.toggle-target[data-hideme="hidden"] {
display: none;
}
.toggle-target[data-hideme="showme"] {
display: block;
}
.toggle-target[data-hideme="dblclick"] {
display: block;
border: solid 2px green;
padding: 1rem;
opacity: 0.50;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
}
.green-block {
background-color: green;
}
<button type="button" class="toggle-button" data-target=".red-block">Div 1 - Red</button>
<button type="button" class="toggle-button" data-target=".blue-block">Div 2 - Blue</button>
<button type="button" class="toggle-button" data-target=".green-block">Div 3 - Green</button>
<div class="toggle-target red-block" data-hideme="hidden">red</div>
<div class="toggle-target blue-block" data-hideme="hidden">blue</div>
<div class="toggle-target green-block" data-hideme="hidden">green</div>

This can be done in many ways. I think the best approach in your case could be
BUTTONS
<button type="button" onclick="show_div('Div_1')">Div 1 - Red</button>
<button type="button" onclick="show_div('Div_2')" style="margin-left: 4px">Div 2 - Blue</button>
<button type="button" onclick="show_div('Div_3')" style="margin-left: 4px">Div 3 - Green</button>
SCRIPT
function show_div(div_id) {
var thisDiv = document.querySelector('#'+div_id);
var thisState = thisDiv.style.display;
// close all in any cases
document.querySelectorAll('.div').forEach(function(el) {
el.style.display = "none";
});
// open this div only if it was closed
if (thisState == "none" ){
thisDiv.style.display = "block";
}
}

Need to switch between 3 divs but unable to work out the js

I'm using switch visible to switch between 3 visible elements on button press, but am only able to get 2. Thanks for the help :)
function switchVisible() {
if (document.getElementById('text1')) {
if (document.getElementById('text1').style.display == 'none') {
document.getElementById('text1').style.display = 'block';
document.getElementById('text2').style.display = 'none';
document.getElementById('text3').style.display = 'block';
}
else {
document.getElementById('text1').style.display = 'none';
document.getElementById('text2').style.display = 'block';
document.getElementById('text3').style.display = 'none';
}
}
}
#text1, #text2, #text3 {
display: none;
}
<div id="text1">text 1</div>
<div id="text2">text 2</div>
<div id="text3">text 3</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>

You can use the below approach to achieve this. Use a switch statment and a count vairable to keep track of 3 divs.
Full working code snippet:
let count = 1;
function switchVisible() {
switch (count) {
case 1:
document.getElementById('text1').style.display = 'block';
document.getElementById('text2').style.display = 'none';
document.getElementById('text3').style.display = 'none';
count++;
break;
case 2:
document.getElementById('text1').style.display = 'none';
document.getElementById('text2').style.display = 'block';
document.getElementById('text3').style.display = 'none';
count++
break;
case 3:
document.getElementById('text1').style.display = 'none';
document.getElementById('text2').style.display = 'none';
document.getElementById('text3').style.display = 'block';
count = 1
break;
default:
count = 1
}
}
#text1,
#text2,
#text3 {
display: none;
}
<div id="text1">text 1</div>
<div id="text2">text 2</div>
<div id="text3">text 3</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();" />
Hope that's how you wanted it work.

to do this one proposal can be :
have an array of all div id to switch
have a rolling index that say which div should be displayed
var divIds = [
'text1',
'text2',
'text3'
];
var visibleIndex = 0;
function switchVisible() {
divIds.forEach(id => {
document.getElementById(id).style.display = 'none';
});
document.getElementById(divIds[visibleIndex]).style.display = 'block';
visibleIndex++;
if (visibleIndex === divIds.length) {
visibleIndex = 0;
}
}
switchVisible();
#text1, #text2, #text3 {
display: none;
}
<div id="text1">text 1</div>
<div id="text2">text 2</div>
<div id="text3">text 3</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>

A class would be better to mark all elements of a collection.
Sidenote: In my experience classes are almost always better, as they can be applied to a single or to multiple elements.
IDs are imo. more for special cases. They address a single element which must be unique throughout the entire page.
Now back to topic:
About the toggling, you can either keep track of the visible element in a variable:
let visible = 0;
function switchVisible() {
const elements = Array.from(document.querySelectorAll(".tab"));
elements.forEach((element, index) => {
element.style.display = index === visible ? "block" : "none";
});
// increment visible
visible = (visible + 1) % elements.length;
}
.tab {
display: none;
}
<div class="tab">text 1</div>
<div class="tab">text 2</div>
<div class="tab">text 3</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();" />
or you find out which one is visible in the function itself.
function switchVisible() {
const elements = Array.from(document.querySelectorAll(".tab"));
// checking which one is the first that has some dimension
let visible = elements.findIndex(element => element.offsetWidth || element.offsetHeight);
// increment visible
visible = (visible + 1) % elements.length;
// make this "next one" visible
elements.forEach((element, index) => {
element.style.display = index === visible ? "block" : "none";
});
}
.tab {
display: none;
}
<div class="tab">text 1</div>
<div class="tab">text 2</div>
<div class="tab">text 3</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible()" />

style.display="none"; doesn't work with javascript DOM

a beginner here, i'm trying to make a modal that will be shown once the share button is clicked and i don't seem to find why the onclick function isn't executed, the idea is once the share button is clicked the display:none; will be changed to display:block, so either there is a problem with style.display="block" or, which is more probable, i suck .
Any help is appreciated.
Thank you previously.
HTML code:
<div class="navbar-container">
<div class="nav nav-1" >
<button class="btn btn-1" id="sharebtn">Share </button>
</div>
<div class="nav nav-2">
<button class="btn btn-2" id="howbtn">how does it work ?</button>
</div>
<div class="nav nav-3" >
<button class="btn btn-3" id="abouttns">About</button>
</div>
</div>
<!---Creating the modals-->
<div id="modal-share">
<div class="modal-header">
<button class="close-share">×</button>
</div>
<div class="link">
<input type="text" class="link-input" placeholder="www.youtube.com/jdlkfsjakfdsa">
<button id="share-btn" onclick="fuck">share</button>
</div>
<div class="description">
<input type="text" max="50" placeholder="cats are not that smart">
</div>
</div>
CSS code:
#modal-share{
display: none; /*hidden by default*/
position: fixed; /*staying in the center even when scrolling*/
z-index: 1; /*stays on top of grids, 3D translation*/
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: white; /*color of the modal*/
background-color: rgba(0,0,0,0.4); /*color of the background*/
border:1px solid black;
}
Javascript code:
<script>
var modal=document.getElementById("modal-share");
var share_btn=document.getElementsById("sharebtn");
var close_share=document.getElementsByClassName("close-share");
share_btn.onclick=function(){
modal.style.display="block";
}
close_share.onclick=function(){
modal.style.display="none";
}
window.onclick=function(event){
if(event.target==modal){
modal.style.display="none";
}
}
</script>

There is actually an error in your script which is causing everything else to fail, namely
var share_btn=document.getElementsById("sharebtn");
There is no function document.getElementsById, only document.getElementById. I have your code working with the fix on the following link -
https://jsfiddle.net/2pfzc4gL/

There is a typo in your script which is causing the issue.
var share_btn=document.getElementsById("sharebtn");
it should be getElementById instead of getElementsById.
it would be better if we use querySelector for querying DOM element and for events addEventListener instead of overriding the click function
var share_btn = document.querySelector("#sharebtn");
var close_share = document.querySelector(".close-share");
var modal = document.querySelector("#modal-share");
share_btn.addEventListener("click", function () {
modal.style.display = "block";
});
close_share.addEventListener("click", function () {
modal.style.display = "none";
});
window.addEventListener("click", function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
});

Two things, first there's a typo in your code getElementsById should be getElementById. And the second is that getElementsByClassName returns an array like collection of elements so you need to retrieve the first one from the array. Here's the updated javascript.
const modal = document.getElementById("modal-share");
const share_btn = document.getElementById("sharebtn"); // typo here in original
const close_share = document.getElementsByClassName("close-share")[0]; // select first element in HTML collection
share_btn.onclick = function () {
modal.style.display = "block";
}
close_share.onclick = function () {
modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

What will I add to my code so that when I click the other buttons, the opened element automatically closes?

My code works but I have to double click the button I clicked just to close it. I would like that when I click the other button, the opened element automatically closes.
<div class="col- menu">
<ul>
<li>Picture</li>
<li>About</li>
<li>Size</li>
</ul>
</div>
<div class="content">
<p><span id="pic1"><img src="1.jpg"></span></p>
<p><span id="description" style="display: none;">Cool!</span></p>
<p><span id="size" style="display: none;"><img src="2.jpg"></span></p>
</div>
<script type="text/javascript">
function toggleStuff(id) {
if (document.getElementById(id).style.display == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>

You Can try this:
var stuffArr = ['pic1', 'description', 'size'];
function toggleStuff(id) {
stuffArr.forEach(function(currentId) {
if(currentId === id) {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
});
}

You need to loop through all the id''s
Please note this is just demo code to give you an idea
function toggleStuff (id){
//get list of ids
var pic1 = document.getElementById ("pic1");
var size = document.getElementById ("size");
var idSize = 2;
var idArray = Array ("pic1","size");
for (var i = 0; i < idSize; i++){
if (idArray.indexOf (i) == id){
//display id
}else {
//hide id
}
}
}

One out of millions of possible solutions:
function toggleStuff(id) {
var el = document.getElementById(id)
el.classList.toggle('visible');
document.querySelectorAll('.togglable:not(#'+id+')').forEach(function(item) {
item.classList.remove('visible');
})
}
.togglable {
display: none;
}
.visible {
display: block;
}
<div class="col- menu">
<ul>
<li>Picture</li>
<li>About</li>
<li>Size</li>
</ul>
</div>
<div class="content">
<p><span id="pic1" class="togglable">PIC1</span></p>
<p><span id="description" class="togglable">DESCRIPTION</span></p>
<p><span id="size" class="togglable">SIZE</span></p>
</div>

managing several show/hide divs

I have some scripts here that show and hide divs when click. Now what I need is to just only display one div at a time. I have a code that controls them all but its not working I don't know about much of javascript.
This is the first example of show/hide function that can be done simultaneously without hiding the other divs.
FIDDLE HERE
HTML:
<a href="javascript:ReverseDisplay('uniquename')">
Click to show/hide.
</a>
<div id="uniquename" style="display:none;">
<p>Content goes here.</p>
</div>
<a href="javascript:ReverseDisplay('uniquename1')">
Click to show/hide.
</a>
<div id="uniquename1" style="display:none;">
<p>Content goes here.</p>
</div>
SCRIPT:
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if (document.getElementById(d).style.display == "none") {
document.getElementById(d).style.display = "block";
} else {
document.getElementById(d).style.display = "none";
}
}
function HideAllShowOne(d) {
// Between the quotation marks, list the id values of each div.
var IDvaluesOfEachDiv = "idone idtwo uniquename1 uniquename";
//-------------------------------------------------------------
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," ");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/ +/g," ");
var IDlist = IDvaluesOfEachDiv.split(" ");
for(var i=0; i<IDlist.length; i++) { HideContent(IDlist[i]); }
ShowContent(d);
}
The other fiddle I created would do what I need but the script seems not to be working. Fiddle here
Found the solution on my code thanks to #Abhas Tandon
Fiddle here the extra id's inside the IDvaluesOfEachDiv seems to be making some error with the codes.

If you are happy with IE10+ support then
function ReverseDisplay(d) {
var els = document.querySelectorAll('.toggle.active:not(#' + d + ')');
for (var i = 0; i < els.length; i++) {
els[i].classList.remove('active');
}
document.getElementById(d).classList.toggle('active')
}
.toggle {
display: none;
}
.toggle.active {
display: block;
}
<a href="javascript:ReverseDisplay('uniquename')">
Click to show/hide.
</a>
<div id="uniquename" class="toggle">
<p>Content goes here.</p>
</div>
<a href="javascript:ReverseDisplay('uniquename1')">
Click to show/hide.
</a>
<div id="uniquename1" class="toggle">
<p>Content goes here.</p>
</div>

I would suggest to use jQuery which is far easier.
Include thiswithin
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
HTML
<div id="id_one">Item 1</div>
<div id="content_one">
content goes here
</div>
<div id="id_two">Item 1</div>
<div id="content_two">
content goes here
</div>
Script:
$(function()
{
$("#content_one").hide();
$("#content_two").hide();
});
$("#id_one").on("click",function()
{
$("#content_one").slideDown("fast");
});
$("#id_two").on("click",function()
{
$("#content_two").slideDown("fast");
});

If you have a "Button" for every DIV inside your HTML - you can go by element index
var btn = document.querySelectorAll(".btn");
var div = document.querySelectorAll(".ele");
function toggleDivs() {
for(var i=0; i<btn.length; i++) {
var us = i===[].slice.call(btn).indexOf(this);
btn[i].tog = us ? this.tog^=1 : 0;
div[i].style.display = ["none","block"][us?[this.tog]:0];
}
}
for(var i=0; i<btn.length; i++) btn[i].addEventListener("click", toggleDivs);
.btn{/* Anchors Buttons */ display:block; cursor:pointer; color:#00f;}
.ele{/* Hidden Divs */ display:none;}
<a class="btn"> 1Click to show/hide.</a>
<div class="ele"><p>1Content goes here.</p></div>
<hr>
<a class="btn">2Click to show/hide.</a>
<div class="ele"><p>2Content goes here.</p></div>
<hr>