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

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>

Related

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>

example sort two div's

I have two div's A and B, I looking example to switch between them without reloading a page, for example onclick a first button show only div A, second button show only Div B, and third button show all A and B div's

<div id="A" style="dispay:none">
<p> this is div 1 </p>
</div>
<div id="B" style="dispay:none">
<p> this is div 2 </p>
</div>
<input type="button" value="showA" onclick="showA()">
<input type="button" value="showA" onclick="showB()">
<input type="button" value="showA" onclick="showAB()">
<script>
var showA = function()
{
document.getElementById('A').style.display = 'block';
document.getElementById('B').style.display = 'none';
}
var showB = function()
{
document.getElementById('B').style.display = 'block';
document.getElementById('A').style.display = 'none';
}
var showAB = function()
{
document.getElementById('A').style.display = 'block';
document.getElementById('B').style.display = 'block';
}
</script>

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>

Show div hide another div using javascript

My html code looks like this:
<div id="register" class="dropdown">
<button id="regbutton" href="#" onclick="toggle_visibility('container1');">show1</button>
<div id="container1" style="display:'none';">
</div>
</div>
<div id="login" class="dropdown">
<button id="loginbutton" href="#" onclick="toggle_visibility('container2')"><b>Masuk</b></button>
<div id="container2" style="display:'none';"></div>
</div>
and this is my js code:
function toggle_visibility(id) {
var x = document.getElementById(id); {
if(x.style.display == 'block') {
x.style.display = 'none';
} else {
x.style.display = 'block';
}
}
The question is, How can I make these divs to be "when one div is visible, the other one is hidden" ?
sorry for my bad English lang :# :3

Firstly add a class to each of the divs here i have it as container
then hide all of them, and show the 1 specific div
<div id="register" class="dropdown">
<button id="regbutton" href="#" onclick="toggle_visibility('container1');">show1</button>
<div id="container1" class='container' style="display:none;">test
</div>
</div>
<div id="login" class="dropdown">
<button id="loginbutton" href="#" onclick="toggle_visibility('container2')"><b>Masuk</b></button>
<div id="container2" class='container' style="display:none;">test
</div>
</div>
<script>
function toggle_visibility(id) {
var x = document.getElementById(id);
var divsToHide = document.getElementsByClassName('container'); //divsToHide is an array so we loop through them
for(var i = 0; i < divsToHide.length; i++){
divsToHide[i].style.display = "none";
}
x.style.display = 'block';
}
</script>

If you only need these two divs, you can simply use their div id's and a simple conditional:
function toggle(divNumber) {
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
if (divNumber == 1) {
div1.style.display = 'none';
div2.style.display = 'block';
} else {
div2.style.display = 'none';
div1.style.display = 'block';
}
}
Fiddle:
https://jsfiddle.net/8480twew/

get position of an element and display a div after it with javascript

I have 10 different buttons and i want to show a hidden div exactly down from the button the user pressed.the div is currenlty showing exactly at the block the code of div is istead of taking new cords top: left:
THE function call:
<img style="position:relative;float:right;padding-top:7px;" onclick="find_pos(this)" src="images/view_comments.png"></li></a>
function find_pos(ele) {
var x=0;
var y=0;
while(true){
x += ele.offsetLeft;
y += ele.offsetTop;
if(ele.offsetParent === null){
break;
}
ele = ele.offsetParent;
}
hidden_comment_form.style.display='block';
hidden_comment_form.style.top=y;
hidden_comment_form.style.left=x;
}

I give you 2 options :
option 1 :
<div class="main">
<button class="btn">a</button>
<div class="toggle"> a toggle this </div>
</div>
<div class="main">
<button class="btn">b</button>
<div class="toggle"> b toggle this </div>
</div>
<script>
$(document).ready(function() {
$('button.btn').on('click', function() {
var $div = $(this).siblings('.toggle');
$div.toggle();
})
})
</script>
option 2:
<button class="btn">a</button>
<div class="toggle"> a toggle this </div>
<button class="btn">b</button>
<div class="toggle"> b toggle this </div>
<script>
$(document).ready(function() {
$('button.btn').on('click', function() {
var $div = $(this).next();
$div.toggle();
})
})
</script>
i suggest option 1 is better

Categories

Resources