Hidden Div takes space before Javascript switch with other - javascript

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>

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>

electron: how to hide / show <br /> and <hr /> by button?

Using electron to develop a windows app to parse my json files. Click buttons to open, edit and save correspond json files. The related html codes are
<div class="rightfixed">
<div id="jsonName">Empty.</div>
<div id="TimeJson">
<div id="Time_StartUTCTimeT"><b>Start UTC Time</b><br />UTC Time when simulation start. [year-month-day
hour:minute:second.microsecond]</div>
<input id="Time_StartUTCTime"><br /></input>
<div id="Time_CelebodyTimeStepT"><b>Celebody Time Step (ms)</b><br />Calculation period for celebody simulation.</div>
<input id="Time_CelebodyTimeStep"><br /></input>
<div id="Time_DynamicsTimeStepT"><b>Dynamics Time Step (ms)</b><br />Calculation period for dynamic simulation.</div>
<input id="Time_DynamicsTimeStep"><br /></input>
<div id="Time_KinematicsTimeStepT"><b>Kinematics Time Step (ms)</b><br />Calculation period for kinematics simulation.</div>
<input id="Time_KinematicsTimeStep"><br /></input>
<div id="Time_OutputTimeStepT"><b>Output Time Step (ms)</b><br />Output archive period for simulation results.</div>
<input id="Time_OutputTimeStep"><br /></input>
<div id="Time_TotalSimulationTimeT"><b>Total Simulation Time (s)</b><br />Overall simulation duration.</div>
<input id="Time_TotalSimulationTime"><br /></input>
</div>
<div id="EnvironmentJson">
<div id="Env_EnvironmentModel" style="font-weight:bold;font-size:16px;">EnvironmentModel<br /></div>
<hr />
<div id="Env_iCSnT"><b>Gravity Mode Order</b><br />Harmonic order of gravity model (iCSn).</div>
<input id="Env_iCSn"><br /></input>
<div id="Env_iCSmT"><b>Gravity Mode Series</b><br />Harmonic series of gravity model (iCSm).</div>
<input id="Env_iCSm"><br /></input>
<div id="Env_iGHnT"><b>Magnetic Mode Order</b><br />Harmonic order of magnetic model (iGSn).</div>
<input id="Env_iGHn"><br /></input>
<div id="Env_iGHmT"><b>Magnetic Mode Series</b><br />Harmonic series of magnetic model (iGSm).</div>
<input id="Env_iGHm"><br /></input>
</div>
</div>
and the js codes are
function TimeJsonInfo_Show() {
Time_StartUTCTime.style.display = "block";
Time_CelebodyTimeStep.style.display = "block";
Time_DynamicsTimeStep.style.display = "block";
Time_KinematicsTimeStep.style.display = "block";
Time_OutputTimeStep.style.display = "block";
Time_TotalSimulationTime.style.display = "block";
Time_StartUTCTimeT.style.display = "block";
Time_CelebodyTimeStepT.style.display = "block";
Time_DynamicsTimeStepT.style.display = "block";
Time_KinematicsTimeStepT.style.display = "block";
Time_OutputTimeStepT.style.display = "block";
Time_TotalSimulationTimeT.style.display = "block";
}
function TimeJsonInfo_Hide() {
Time_StartUTCTime.style.display = "none";
Time_CelebodyTimeStep.style.display = "none";
Time_DynamicsTimeStep.style.display = "none";
Time_KinematicsTimeStep.style.display = "none";
Time_OutputTimeStep.style.display = "none";
Time_TotalSimulationTime.style.display = "none";
Time_StartUTCTimeT.style.display = "none";
Time_CelebodyTimeStepT.style.display = "none";
Time_DynamicsTimeStepT.style.display = "none";
Time_KinematicsTimeStepT.style.display = "none";
Time_OutputTimeStepT.style.display = "none";
Time_TotalSimulationTimeT.style.display = "none";
}
function EnvironmentJsonInfo_Show() {
Env_EnvironmentModel.style.display = "block";
Env_iCSn.style.display = "block";
Env_iCSm.style.display = "block";
Env_iGHn.style.display = "block";
Env_iGHm.style.display = "block";
Env_iCSnT.style.display = "block";
Env_iCSmT.style.display = "block";
Env_iGHnT.style.display = "block";
Env_iGHmT.style.display = "block";
}
function EnvironmentJsonInfo_Hide() {
Env_EnvironmentModel.style.display = "none";
Env_iCSn.style.display = "none";
Env_iCSm.style.display = "none";
Env_iGHn.style.display = "none";
Env_iGHm.style.display = "none";
Env_iCSnT.style.display = "none";
Env_iCSmT.style.display = "none";
Env_iGHnT.style.display = "none";
Env_iGHmT.style.display = "none";
}
btnTimeJson.onclick = function () {
var Path = jsonPath.innerHTML + "\\Time.json"
fs.exists(Path, (flag) => {
if(!flag)
jsonName.innerHTML = "Time.json does not exist."
else
jsonName.style.display = "none"
fs.readFile(Path,(_err,str) => {
jsonName.innerHTML = basename(Path)
jsonContent = JSON.parse(str)
Time_StartUTCTime.value = jsonContent.StartUTCTime
Time_CelebodyTimeStep.value = jsonContent['CelebodyTimeStep(ms)']
Time_DynamicsTimeStep.value = jsonContent['DynamicsTimeStep(ms)']
Time_KinematicsTimeStep.value = jsonContent['KinematicsTimeStep(ms)']
Time_OutputTimeStep.value = jsonContent['OutputTimeStep(ms)']
Time_TotalSimulationTime.value = jsonContent['TotalSimulationTime(s)']
EnvironmentJsonInfo_Hide()
TimeJsonInfo_Show()
})
})
}
When the window is initialized, it is like below with all <div> hided except jsonName.
window initialized
However the <br /> and <hr /> still exist.
When clicking for example the Time button, the window would like to show contents of my Time.json within <div id="TimeJson">. And the window appears to be ok.
window clicking Time button
But when I click Environment button, the <br /> within <div id="TimeJson"> makes multiple blank lines before the content within <div id="EnvironmentJson">.
enter image description here
Does anyone know how to fix this? Or is there any better solutions to create an app to edit multiple json files within one window? I know that the code is poor because I only learned html/electron for a couple of days :-)
br and hr are just like other elements which can be hidden by display: none
br,
hr {
display: none;
}
a
<br /> b
<hr /> c
you can put them inside the divs you show / hide so they will be shown only if their parents is visible.
I wouldn't use <hr /> and <br /> but border and margin to split the design (ass css) and the content (as html)
Another side note: I'd also get rid from all the style modifications (e.g. style.display = 'none') and use css based display (for example data- attributes).
For example:
const parent = document.querySelector('.parent');
document.querySelectorAll('button').forEach((button, index) => {
button.addEventListener('click', () => {
parent.setAttribute('data-item', index + 1);
});
});
.parent div {
display: none;
}
.parent[data-item="1"] .child1,
.parent[data-item="2"] .child2,
.parent[data-item="3"] .child3,
.parent[data-item="4"] .child4 {
display: block;
}
<div class="parent">
<div class="child1">child 1</div>
<div class="child2">child 2</div>
<div class="child3">child 3</div>
<div class="child4">child 4</div>
</div>
<button>Show element 1</button>
<button>Show element 2</button>
<button>Show element 3</button>
<button>Show element 4</button>

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>

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>

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/

Categories

Resources