HTML/CSS Onclick divs automatically hiding - javascript

Sorry if this had already been asked but I have two onclick divs and what I want to do is for example: I open the first one but then when I open the second one I want the first one to close automatically and the other way around.
Here's the HTML:
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction2() {
var x = document.getElementById("myDIV2");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none"; }
}
#myDIV {
position: relative;
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
top: 150px;
}
.button1 {
position: relative;
top: 120px
}
#myDIV2 {
position: relative;
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
}
.button2 {
position: relative;
}
<button class="button1" onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<button class="button2" onclick="myFunction2()">Try it2</button>
<div id="myDIV2">
This is my second DIV element.
</div>
DEMO: https://codepen.io/pen/NWrZBRX

You need to get both divs in both functions then. Then hide whichever one you want and show the other one. You also only need one function because it is just reversing whatever you already did. I also made it so the button is always on top of the div by using z-index:1; because it was being hidden some of the time below the divs.
(this can be done in your existing code by doing the following)
#myDIV {
position: relative;
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
top: 150px;
}
.button1 {
position: relative;
top: 120px
z-index:1;
}
#myDIV2 {
position: relative;
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
}
.button2 {
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="legStyle.css">
</head>
<body>
<button class="button1" onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<div id="myDIV2">
This is my second DIV element.
</div>
<script>
function myFunction() {
const x = document.getElementById("myDIV");
const y = document.getElementById("myDIV2");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none"
} else {
x.style.display = "none";
y.style.display = "block"
}
}
</script>
</body>
</html>

Related

How to show or hide a div when clicking on the same button?

I face a problem when i want to add interactivity on my leaflet map.
I have a button on my map
<button id="az">Availability Zones</button>
The thing i want is when i click on it, it show a square of informations on my map
So i have create a square
<div class="square" id='square'> </div>
CSS = .square{
z-index: 4000;
width: 100%;
height: 0;
padding-top: 100%;
background-color: #ccc;
position: absolute;
display: none;
}
And an other css class square with same properties but with a display: block
.squareclick{
z-index: 4000;
width: 30%;
weight: 30%;
padding: 0 25 30;
margin-left: 400px;
margin-bottom: 200px;
height: 0;
padding-top: 100%;
background-color: #ccc;
position: relative;
display: block;
}
Now, for opening this square on a button i've add some interactivity
var button = document.getElementById('az')
L.DomEvent.on(button,'click',function(e){
console.log('Button clicked')
});
L.DomEvent.on(button,'click',function(){
document.getElementById('square').setAttribute("class", "squareclick");
});
The thing is that that button works for opening the square, but not for closing (I know this is normal)
I've try that thing but it seems to not work
L.DomEvent.on(button,'click',function myFunction() {
var x = document.getElementById("square");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
I don't know how to add a second interactivity on the same button :(
If someone can help!
Thank you very much
What you can try doing is instead of directly checking whether the square is visible or not, you can set a variable to check. Change:
L.DomEvent.on(button,'click',function myFunction() {
var x = document.getElementById("square");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
To:
var shown = false;
L.DomEvent.on(button,'click',function myFunction() {
var x = document.getElementById("square");
if (shown == false) {
x.style.display = "block";
shown = true;
} else if (shown == true) {
x.style.display = "none";
shown = false;
}
}
The variable shown tells us at the start the square is not visible. Every time you click the button, the variable changes and so does the style. If the square was to be visible at the start, then you can simply change shown to true at the start of the script. See if that way works. :)
I recommand to only add a class to the square that changes the display: none style.
var button = document.getElementById('az')
var square = document.getElementById('square')
L.DomEvent.on(button,'click',function(e){
console.log('Button clicked')
if(L.DomUtil.hasClass(square,'show')){
L.DomUtil.removeClass(square,'show');
}else{
L.DomUtil.addClass(square,'show');
}
});
.square{
z-index: 4000;
width: 30%;
weight: 30%;
padding: 0 25 30;
margin-left: 400px;
margin-bottom: 200px;
height: 0;
padding-top: 100%;
background-color: #ccc;
position: absolute;
display: none;
}
.show{
display: block;
}
https://jsfiddle.net/falkedesign/v8tdzmhe/

Make a clickable element close a visible element before opening a new element

See my code snippet below. I have multiple clickable divs that when clicked, shows some content below. Each clickable div displays a different set of content. My problem is, both content blocks can be open at the same time. I only want to show one content block at a time. So when clicked, if there is already a content block open I want it to close before opening the new content block. How can I achieve this?
function showOne() {
var x = document.getElementById("thing");
if (x.style.display === "none") {
x.style.display = "flex";
} else {
x.style.display = "none";
}
}
function showTwo() {
var x = document.getElementById("another-thing");
if (x.style.display === "none") {
x.style.display = "flex";
} else {
x.style.display = "none";
}
}
body{
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
}
div{
background-color: teal;
width: 100%;
color: #ffffff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.clickone{
cursor: pointer;
}
.clicktwo{
background-color: CadetBlue;
cursor: pointer;
}
.thing,
.another-thing{
background-color: salmon;
height: 200px;
margin: 25px;
width: auto;
display: none;
}
<body>
<div class="clickone" onclick="showOne()">
<p>Click Me To Show One Thing</p>
</div>
<div class="clicktwo" onclick="showTwo()">
<p>Click Me To Show Another Thing</p>
</div>
<div id="thing" class="thing">
<p>Thing</p>
</div>
<div id="another-thing" class="another-thing">
<p>Another Thing</p>
</div>
</body>
The easiest way would be making a switch like this:
function showOne() {
var x = document.getElementById("thing");
var another = document.getElementById("another-thing");
if (x.style.display === "none") {
another.style.display = "none"
x.style.display = "flex";
} else {
x.style.display = "none";
}
}
function showTwo() {
var x = document.getElementById("another-thing");
var thing = document.getElementById("thing");
if (x.style.display === "none") {
thing.style.display = "none";
x.style.display = "flex";
} else {
x.style.display = "none";
}
}
body{
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
}
div{
background-color: teal;
width: 100%;
color: #ffffff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.clickone{
cursor: pointer;
}
.clicktwo{
background-color: CadetBlue;
cursor: pointer;
}
.thing,
.another-thing{
background-color: salmon;
height: 200px;
margin: 25px;
width: auto;
display: none;
}
<body>
<div class="clickone" onclick="showOne()">
<p>Click Me To Show One Thing</p>
</div>
<div class="clicktwo" onclick="showTwo()">
<p>Click Me To Show Another Thing</p>
</div>
<div id="thing" class="thing">
<p>Thing</p>
</div>
<div id="another-thing" class="another-thing">
<p>Another Thing</p>
</div>
</body>
But you can make it more reusable doing a reusable function
Its better if you have more and more div's to switch
function show(receivedId) {
const allIds = ["thing", "another-thing"];
for (const index in allIds) {
const actualId = allIds[index];
if (actualId === receivedId) {
document.getElementById(actualId).style.display = "flex";
} else {
document.getElementById(actualId).style.display = "none";
}
}
}
body{
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
}
div{
background-color: teal;
width: 100%;
color: #ffffff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.clickone{
cursor: pointer;
}
.clicktwo{
background-color: CadetBlue;
cursor: pointer;
}
.thing,
.another-thing{
background-color: salmon;
height: 200px;
margin: 25px;
width: auto;
display: none;
}
<body>
<div class="clickone" onclick="show('thing')">
<p>Click Me To Show One Thing</p>
</div>
<div class="clicktwo" onclick="show('another-thing')">
<p>Click Me To Show Another Thing</p>
</div>
<div id="thing" class="thing">
<p>Thing</p>
</div>
<div id="another-thing" class="another-thing">
<p>Another Thing</p>
</div>
</body>
function showOne() {
var x = document.getElementById("thing");
var y = document.getElementById("another-thing");
if (x.style.display === "none") {
x.style.display = "flex";
y.style.display = "none";
} else {
x.style.display = "none";
}
}
function showTwo() {
var x = document.getElementById("another-thing");
var y = document.getElementById("thing");
if (x.style.display === "none") {
x.style.display = "flex";
y.style.display = "none";
} else {
x.style.display = "none";
}
}
If there are only two divs in question you could do it like this. If there are many then perhaps give them class names as well as IDs and then cycle through the class names before setting the 1 ID you wish to show.

Resizing divs on visibility toggle (in HTML + pure JS)?

I have three divs, and three checkboxes to toggle the visibility of each of these divs. However, I would like each div to resize when a toggle id detected. For instance, if all three divs have their respective checkboxes to be toggled to "on," then each div should take up approximately 1/3 of the space on the screen. If only two checkboxes are checked, then their respective divs should each take up 1/2 of the space on the screen, and if only one is checked, then the div should expand to fill the available area.
The code I have so far is available at this CodePen and in the snippet below:
function myFunction1() {
var x = document.getElementById("myDIV-1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction2() {
var x = document.getElementById("myDIV-2");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction3() {
var x = document.getElementById("myDIV-3");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
#myDIV-1 {
width: 30%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin: 20px;
float: left;
}
#myDIV-2 {
width: 30%;
padding: 50px 0;
text-align: center;
background-color: coral;
margin: 20px;
float: left;
}
#myDIV-3 {
width: 30%;
padding: 50px 0;
text-align: center;
background-color: gold;
margin: 20px;
float: left;
}
<p>Click on the checkboxes to toggle the visibility of the divs.</p>
<input type="checkbox" onclick="myFunction1()" checked>Toggle DIV-1</input>
<input type="checkbox" onclick="myFunction2()" checked>Toggle DIV-2</input>
<input type="checkbox" onclick="myFunction3()" checked>Toggle DIV-3</input>
<div>
<div id="myDIV-1">
This is my DIV-1 element.
</div>
<div id="myDIV-2">
This is my DIV element.
</div>
<div id="myDIV-3">
This is my DIV element.
</div>
</div>
The CodePen I linked above is a working example of the toggle effect with checkboxes, but I can't figure how to edit the JS functions to resize the divs.
Any help would be greatly appreciated!
Use display: flex; on the outer div and set flex: 1; on the children (I shortened the JS and CSS):
function toggle(id){
var x = document.getElementById(id)
if (x.style.display === "none") x.style.display = "block"
else x.style.display = "none"
}
#outer { display: flex; }
#outer div {
flex: 1;
padding: 50px 0;
text-align: center;
margin: 20px;
}
#myDIV-1 { background-color: lightblue; }
#myDIV-2 { background-color: coral; }
#myDIV-3 { background-color: gold; }
<p>Click on the checkboxes to toggle the visibility of the divs.</p>
<input type="checkbox" onclick="toggle('myDIV-1')" checked>Toggle DIV-1</input>
<input type="checkbox" onclick="toggle('myDIV-2')" checked>Toggle DIV-2</input>
<input type="checkbox" onclick="toggle('myDIV-3')" checked>Toggle DIV-3</input>
<div id="outer">
<div id="myDIV-1">
This is my DIV-1 element.
</div>
<div id="myDIV-2">
This is my DIV element.
</div>
<div id="myDIV-3">
This is my DIV element.
</div>
</div>

I know how to toggle show/hide a div onclick, but how to do that for onpress?

I have a div I'm hiding behind a button I want to toggle "onpress". I want that div to only be visible when someone presses down on the button layered above it.
I'm only aware of how to use onclick for toggling visibility. See the snippet.
I simply want a press function that toggles the show/hide of the button above the hidden div.
function myFunction() {
var x = document.getElementById("button1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
button {
width: inherit;
height: inherit;
}
body {
background-color: black;
}
#button1 {
background-color: rgba(100,100,100,.5);
position: absolute;
width: 50vw;
height: 10vw;
z-index: 1000;
}
#hiddendiv1 {
background-color: orange;
position: absolute;
width: 50vw;
height: 10vw;
display: flex;
align-items:center;
justify-content: center;
z-index: -1000;
}
<div id=button1>
<button onclick="myFunction()">I want to toggle this button div off during "onpress"</button>
</div>
<div id=hiddendiv1>
I want to see this div ONLY when the button is being "pressed" down.
</div>
There's a mousedown event – https://developer.mozilla.org/en-US/docs/Web/Events/mousedown
document.getElementById('button').addEventListener('mousedown', function () {
console.log('tada');
});
<button id="button">Press me, but never let go. ;)</button>
Cheers!

Close overlay on page refresh/revisit

I have the following HTML, CSS, and Javascript:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function getTarget(event){
target = (typeof window.event === "undefined")?event.target:window.event.srcElement;
return target;
}
document.onclick = function(event){
var target = getTarget(event);
if(target.id == ""){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
}
}
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.opacity = .7;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
button.style.color="#ff0000";
}
}
</script>
<style type="text/css">
div#overlay {
display: none;
z-index: 2;
background: #A9A9A9;
position: fixed;
width: 879px;
height: 291px;
top: 50px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: fixed;
z-index: 3;
width: 719px;
height: 215px;
top: 88px;
left: 80px;
background: #FFF;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left: 24px;
}
</style>
<style type="text/css">
.btn {
cursor:pointer;
font-size:24px;
border:none;
color:#000
}
.btn:hover{
color:#F00;
}
</style>
<style type="text/css">
.x {
background-color:white;
cursor:pointer;
font:Arial;
font-size:14px;
color:red;
z-index: 4;
position: fixed;
top: 92px;
left: 766px;
}
</style>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<button class="x" onmousedown="toggleOverlay()">X</button>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
<button id="qualityButton" class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->
</div>
</body>
</html>
The overlay opens and closes just fine. However, if the overlay is opened and the user visits another page on the website, and returns to the original page where the overlay was, the overlay still remains open...Is there a way to make the overlay close upon refreshing the page and upon returning to the page having visited another one?
Any help is much appreciated :)
James
Try This using display none to the div which you want to hide while refreshing
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function getTarget(event){
target = (typeof window.event === "undefined")?event.target:window.event.srcElement;
return target;
}
document.onclick = function(event){
var target = getTarget(event);
if(target.id == ""){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
}
}
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.opacity = .7;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
button.style.color="#ff0000";
}
}
</script>
<style type="text/css">
div#overlay {
display: none;
z-index: 2;
background: #A9A9A9;
position: fixed;
width: 879px;
height: 291px;
top: 50px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: fixed;
z-index: 3;
width: 719px;
height: 215px;
top: 88px;
left: 80px;
background: #FFF;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left: 24px;
}
</style>
<style type="text/css">
.btn {
cursor:pointer;
font-size:24px;
border:none;
color:#000
}
.btn:hover{
color:#F00;
}
</style>
<style type="text/css">
.x {
background-color:white;
cursor:pointer;
font:Arial;
font-size:14px;
color:red;
z-index: 4;
position: fixed;
top: 92px;
left: 766px;
}
</style>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay" style="display: none"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<button class="x" onmousedown="toggleOverlay()">X</button>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
<button id="qualityButton" class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->
</div>
</body>
</html>
The easiest way I can think of is using Localstorage to do the task. You can read more about localstorage Here
In your case you will have to save timestamp in the variable. And then you can have an if statement on your homepage which checks the time which has elapsed since last time the page was refreshed. Let's say if it is more than 10 minutes or maybe 30 minutes you can show the overlay again. The reason I am saying you will need timestamp is that you will have to unset the variable if the user visits again after some time and is not returning from with-in the website. There is no timeout function in localstorage so you will have to use a tweak like timestamp.
Another way is to save a value in $_SESSION and see if it is set to certain value. If it is then it means it is a returning user else its a new user. But I am not sure if your page is php or not therefore I have mentioned localstorage method first.
If you need any further assistance please do let me know.
In my opionion there are at least two solutions.
using coockies
using global function
Second solution:
create your "popup.js" and call it in html, of course. Your js will be:
var Popup = (function () {
var isVisible;
return {
init: function () {
isVisible = false;
},
show: function() {
....
},
hide: function() {
....
},
isVisible: function() {
return isVisible;
}
};
}());

Categories