Develop Reference

How do I create show/hide elements for different buttons?

HTML Code...the buttons interfere with each other. How can I fix this?
<button onclick="myFunction()" style="margin-left:50px;"> Click Here For Help </button> <br> <br>
<div id="help1">
<p> Help </p>
</div>
<button onclick="myFunction()" style="margin-left:50px;"> Click Here For Help </button> <br> <br>
<div id="help2">
<p> Help </p>
</div>
Javascript shown with ids for the different buttons. Onload section to hide the content on page
load.
<script>
function myFunction() {
var x = document.getElementById("help1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
window.onload = function() {
document.getElementById("help1").style.display = 'none';
};
</script>
<script>
function myFunction() {
var x = document.getElementById("help2");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
window.onload = function() {
document.getElementById("help2").style.display = 'none';
};
</script>

One was is to simply pass the id of the element as an input to myFunction so the corresponding element can be retrieved from the document and set to display:none. This will save you from needing duplicate functions. Press the blue Run code snippet button below to see the results.
Method 1:
function myFunction(ID) {
var x = document.getElementById(ID);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
window.onload = function() {
document.getElementById("help1").style.display = 'none';
document.getElementById("help2").style.display = 'none';
};
<button onclick="myFunction('help1')" style="margin-left:50px;"> Click Here For Help </button> <br> <br>
<div id="help1">
<p> Help </p>
</div>
<button onclick="myFunction('help2')" style="margin-left:50px;"> Click Here For Help </button> <br> <br>
<div id="help2">
<p> Help </p>
</div>
Alternative Method:
This example reduces the amount of JavaScript but slightly increases the amount of HTML id tags and classes. It also incoporates some additional CSS. As suggested in the comment above this method uses:
• Event listeners
• Toggles a class using classList
function myFunction() {
document.getElementById("help" + String(this.id.split("_")[2])).classList.toggle("Display_It");
}
window.onload = function() {
document.getElementById("Toggle_Button_1").addEventListener("click", myFunction);
document.getElementById("Toggle_Button_2").addEventListener("click", myFunction);
};
#Toggle_Button_1,
#Toggle_Button_2 {
margin-left: 50px;
}
.Help_Panel {
display: none;
}
.Display_It {
display: block;
}
<button id="Toggle_Button_1"> Click Here For Help </button>
<br>
<br>
<div class="Help_Panel" id="help1">
<p>Help</p>
</div>
<button id="Toggle_Button_2"> Click Here For Help</button>
<br>
<br>
<div class="Help_Panel" id="help2">
<p>Help</p>
</div>

How to Show & Hide div dynamically at the same time?

Hi I am new to HTML an JS I am trying to create a function that will only show the div that wanted to show I wanted to make it dynamic because the div can be more than 5. I wanted like the first button I only wanted to show D1 div the rest of div will be hide if I click button 2 the d1 will be hide and d3 above. I will really appreciate any advice or help thank you
function myFunction(t, n) {
var g = t + n;
var x = document.getElementById(g);
if (g === "D1") {
x.style.display = "block";
//hide div d2 to d5 or more div only show d1
} else if (g === "D2") {
x.style.display = "block";
//hide div d1 then d3 to d5 or more div only show d2
} else if (g === "D3") {
x.style.display = "block";
} else if (g === "D4") {
x.style.display = "block";
} else if (g === "D5") {
x.style.display = "block";
}
}
<button onclick="myFunction('D','1')">B1</button>
<button onclick="myFunction('D','2')">B2</button>
<button onclick="myFunction('D','3')">B3</button>
<button onclick="myFunction('D','4')">B4</button>
<button onclick="myFunction('D','5')">B5</button>
<div id="D1" style="Display:none">
This is my DIV element.
</div>
<div id="D2" style="Display:none">
This is my DIV element.
</div>
<div id="D3" style="Display:none">
This is my DIV element.
</div>
<div id="D4" style="Display:none">
This is my DIV element.
</div>
<div id="D5" style="Display:none">
This is my DIV element.
</div>

Your answer should be a forEach loop. I added number to the divs to make it more clear what happens:
<button onclick="myFunction('D','1')">B1</button>
<button onclick="myFunction('D','2')">B2</button>
<button onclick="myFunction('D','3')">B3</button>
<button onclick="myFunction('D','4')">B4</button>
<button onclick="myFunction('D','5')">B5</button>
<div id="D1" style="Display:none">
This is my DIV 1 element.
</div>
<div id="D2" style="Display:none">
This is my DIV 2 element.
</div>
<div id="D3" style="Display:none">
This is my DIV 3 element.
</div>
<div id="D4" style="Display:none">
This is my DIV 4 element.
</div>
<div id="D5" style="Display:none">
This is my DIV 5 element.
</div>
Your function now looks for all divs via a querySelectorAll and adds visibility if it matches the passed id and hides it otherwise:
function myFunction(t, n) {
var g = t + n;
// get all Divs
const allDivs = document.querySelectorAll("div");
allDivs.forEach(div => {
if(div.id == t+n) {
div.style.display = "block";
} else {
div.style.display = "none"
}
})
}
You can also checkout the pen.

First, hide all, then show the only one you want to show.
function myFunction(t, n) {
// first hide all
for ( var i=1; i<=5; i++ ) {
document.getElementById(t+i).style.display = 'none';
}
// then show only one
document.getElementById(t+n).style.display = 'block';
}
<button onclick="myFunction('D','1')">B1</button>
<button onclick="myFunction('D','2')">B2</button>
<button onclick="myFunction('D','3')">B3</button>
<button onclick="myFunction('D','4')">B4</button>
<button onclick="myFunction('D','5')">B5</button>
<div id="D1" style="Display:none">
This is my DIV1 element.
</div>
<div id="D2" style="Display:none">
This is my DIV2 element.
</div>
<div id="D3" style="Display:none">
This is my DIV3 element.
</div>
<div id="D4" style="Display:none">
This is my DIV4 element.
</div>
<div id="D5" style="Display:none">
This is my DIV5 element.
</div>

function myFunction(t, n) {
var g = t + n;
for(let i=1;i<=5;i++){
//Check class is show
let currentClassName = t+i;
if(currentClassName == g){
document.getElementById(currentClassName).style.display = "block"
}else{
document.getElementById(currentClassName).style.display = "none"
}
}
}

function myFunction(t) {
['D1', 'D2', 'D3', 'D4', 'D5'].forEach((div) => {
if (div !== t) {
document.getElementById(div).style.display = "none";
} else {
document.getElementById(div).style.display = "block";
}
});
}
<button onclick="myFunction('D1')">B1</button>
<button onclick="myFunction('D2')">B2</button>
<button onclick="myFunction('D3')">B3</button>
<button onclick="myFunction('D4')">B4</button>
<button onclick="myFunction('D5')">B5</button>
<div id="D1" style="Display:none">
This is my D1 DIV element.
</div>
<div id="D2" style="Display:none">
This is my D2 DIV element.
</div>
<div id="D3" style="Display:none">
This is my D3 DIV element.
</div>
<div id="D4" style="Display:none">
This is my D4 DIV element.
</div>
<div id="D5" style="Display:none">
This is my D5 DIV element.
</div>

function myFunction(t, n) {
var g = t + n;
var dates = document.querySelectorAll('*[id^="D"]');
for (var i=0;i<dates.length;i++) {
dates[i].style.display= "none";
}
var x = document.getElementById(g);
if (g === "D1") {
x.style.display = "block";
//hide div d2 to d5 or more div only show d1
} else if (g === "D2") {
x.style.display = "block";
//hide div d1 then d3 to d5 or more div only show d2
} else if (g === "D3") {
x.style.display = "block";
} else if (g === "D4") {
x.style.display = "block";
} else if (g === "D5") {
x.style.display = "block";
}
}
<button onclick="myFunction('D','1')">B1</button>
<button onclick="myFunction('D','2')">B2</button>
<button onclick="myFunction('D','3')">B3</button>
<button onclick="myFunction('D','4')">B4</button>
<button onclick="myFunction('D','5')">B5</button>
<div id="D1" style="Display:none">
This is my DIV element1.
</div>
<div id="D2" style="Display:none">
This is my DIV element2.
</div>
<div id="D3" style="Display:none">
This is my DIV element3.
</div>
<div id="D4" style="Display:none">
This is my DIV element4.
</div>
<div id="D5" style="Display:none">
This is my DIV element5.
</div>

Multiple JavaScript Buttons Simplified Into One Function

I have three buttons and three JS functions that toggle the display of three different divs. How can I simplify/condense my three JS functions into one function that connects each button to its corresponding content?
Example:
HTML Buttons
<button onclick="myFunction1()">Button 1</button>
<button onclick="myFunction2()">Button 2</button>
<button onclick="myFunction3()">Button 3</button>
HTML Content
<div id="ContentOne">This is Content One.</div>
<div id="ContentTwo">This is Content Two.</div>
<div id="ContentThree">This is Content Three.</div>
JavaScript
function myFunction1() {
var x = document.getElementById("ContentOne");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction2() {
var x = document.getElementById("ContentTwo");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction3() {
var x = document.getElementById("ContentThree");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

Add a parameter to the condensed function et violà!
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('ContentOne')">Button 1</button>
<button onclick="myFunction('ContentTwo')">Button 2</button>
<button onclick="myFunction('ContentThree')">Button 3</button>
<div id="ContentOne">This is Content One.</div>
<div id="ContentTwo">This is Content Two.</div>
<div id="ContentThree">This is Content Three.</div>
Explanation
The only part that differs within the functions is the ID, so decouple the ID. The function does not need to know which element will be affected of the styling adaptions. So keep the function "dump".
Further learning: Anti-Patterns
If you are interested in improving your programming style, I suggest you take a look at some anti-pattern. For example, you demonstrated the antipattern of hard coding. It's not as untypical as you think.

Inline JS is hard to maintain.
I'd use this code with just a line of CSS to hide elements,
and use JS simply to toggle that .hide class:
const toggleEl = e => document.getElementById(e.target.dataset.tog).classList.toggle("hide");
[...document.querySelectorAll("[data-tog]")].forEach( btn =>
btn.addEventListener("click", toggleEl)
);
.hide { display: none;}
<button data-tog="ContentOne">Button 1</button>
<button data-tog="ContentTwo">Button 2</button>
<button data-tog="ContentThree">Button 3</button>
<div class="hide" id="ContentOne">This is Content One.</div>
<div class="hide" id="ContentTwo">This is Content Two.</div>
<div class="hide" id="ContentThree">This is Content Three.</div>
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
Here's a ES5 example if you prefer:
function toggleEl() {
var id = this.getAttribute("data-tog");
document.getElementById(id).classList.toggle("hide");
}
var buttons = document.querySelectorAll("[data-tog]");
[].forEach.call(buttons, function( btn ) {
btn.addEventListener("click", toggleEl.bind(btn))
});
.hide { display: none;}
<button data-tog="ContentOne">Button 1</button>
<button data-tog="ContentTwo">Button 2</button>
<button data-tog="ContentThree">Button 3</button>
<div class="hide" id="ContentOne">This is Content One.</div>
<div class="hide" id="ContentTwo">This is Content Two.</div>
<div class="hide" id="ContentThree">This is Content Three.</div>

You can use a higher order function.
function generateFunction(elementId) {
return function() {
var x = document.getElementById(elementId);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
}
var myFunction1 = generateFunction("ContentOne");
var myFunction2 = generateFunction("ContentTwo");
var myFunction3 = generateFunction("ContentThree");

Toggle - Hide and show

I copied w3schools hide and show toggle, but I want it to be reversed, so that the extra information isn't there from the beginning, but the button shows it.
This is the code:
html:
<button onclick="myFunction()">Click Me</button>
<div id="myDIV">
This is my DIV element.
</div>
js:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
Any help would be much appreciated!

Solution is simple: Just hide the div.
<div id="myDIV" style="display:none">
This is my DIV element.
</div>
Even cooler if you hide it in css instead:
<div id="myDIV">
This is my DIV element.
</div>
And this in your css:
#myDIV {
display: none;
}

I'd us a utility CSS class for this:
.is--hidden {
display: none;
}
Then you can apply it to the element by default:
<button class="mybutton">Click Me</button>
<div class="example is--hidden">Some Text</div>
and toggle it via jQuery:
$('.mybutton').on('click', function () {
$('.example').toggleClass('is--hidden');
})
Fiddle: https://jsfiddle.net/tL5mj54n/

You just need to add display : none in your code.
function myFunction() {
var x = document.getElementById('myDIV');
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;">
This is my DIV element.
</div>

No changes to styles or HTML required. Your javascript should be the following:
(function () {
var x = document.getElementById('myDIV');
if (x.style.display != 'none') {
x.style.display = 'none';
} else {
x.style.display = 'block';
}
} )();
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display != 'none') {
x.style.display = 'none';
} else {
x.style.display = 'block';
}
};
The first function runs and hides your div and the second reacts to clicks and toggles the div.

Here's a snippet example
Set the style to hide the element (display:none) from the start. Toggle it on click.
document.getElementById('myButton').onclick = function() {
var x = document.getElementById('myDIV');
x.style.display = x.style.display === 'none' ? 'block' : 'none';
};
<button id='myButton' >Click Me</button>
<div id="myDIV" style="display:none">
This is my DIV element.
</div>

Hidden Div takes space before Javascript switch with other

I have 2 Div's that when I press a button they swich between them using javascript .
The problem is that before I press the button the hidden div takes space and messes the layout .
I attached the snippet
function switchVisible() {
if (document.getElementById('1')) {
if (document.getElementById('1').style.display == 'none') {
document.getElementById('1').style.display = 'block';
document.getElementById('2').style.display = 'none';
}
else {
document.getElementById('1').style.display = 'none';
document.getElementById('1').style.display = 'none';
document.getElementById('2').style.display = 'block';
}
}
}
<button type="submit" value="Click" onclick="switchVisible();" </button>
<div id="1">
some content
</div>
<div id="2" class="inner border">
some content 2
</div>

You've just to hide it for the first time using :
document.getElementById('2').style.display = 'none';
Or also using inline style (NOT recommended):
<div id="2" class="inner border" style='display:none'>
Hope this helps.
document.getElementById('2').style.display = 'none';
function switchVisible() {
if (document.getElementById('1')) {
if (document.getElementById('1').style.display == 'none') {
document.getElementById('1').style.display = 'block';
document.getElementById('2').style.display = 'none';
}
else {
document.getElementById('1').style.display = 'none';
document.getElementById('1').style.display = 'none';
document.getElementById('2').style.display = 'block';
}
}
}
<button type="submit" value="Click" onclick="switchVisible();" </button>
<div id="1">
some content
</div>
<div id="2" class="inner border">
some content 2
</div>

<style>
div#2 {display: none;}
</style>