Develop Reference

Toggle or Show/Hide

I need help toggling overlays with multiple divs. I don't want to have a separate function for each one (there's 6 with 6 different overlay popups). The onclick div will reveal the overlay popup. Help is appreciated!
I need help toggling overlays with multiple divs. I don't want to have a separate function for each one (there's 6 with 6 different overlay popups). The onclick div will reveal the overlay popup. Help is appreciated!
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.8);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 1rem;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
<!-- //DIV -->
<div class="row ">
<div class="col-md-6 col-lg-4 d-flex align-items-stretch" onclick="on()">
<div class="card mb-3">
<img src="img/ballet.jpg" class="embed-responsive w-100 classpic" alt="...">
<div class="card-body">
<h5 class="card-title">BALLET</h5>
</div>
</div>
</div>
<!-- //POPUP -->
<div id="overlay" onclick="off()">
<div id="text">
<h3>Ballet</h3>
<p>Ballet is an artistic dance form performed to music using precise and highly formalized set steps and gestures.
Classical ballet, which originated in Renaissance Italy and established its present form during the 19th century,
is characterized by light, graceful, fluid movements and the use of pointe shoes.
</p>
<h4>Shedule:</h4>
<p>Ages 4-8: Thursdays • 4PM<br>
Ages 9-14: Fridays • 7PM</p>
</div>
</div>

There's a problem with your approach, namely, when an element has display:none it is removed from the html tree and cannot receive a click event. Also, no two elements can share the same id attribute and so your function cannot be applied by reference to an id directly.
I've made a working snippet that achieves what I think you are after. There are undoubtedly others that would work but it's quite straight forward and works.
Firstly, arrange each of your alternative div pairs (one hidden, one visible) inside a parent div and give it a class name. This has the advantage that, if you size the container div appropriately, the content will not jump about when you swap the hidden div for visible and vice versa. Next, give classes to distinguish the (initially) hidden content from the visible div. Your markup pattern then will be repeats of:
<div class='container'>
<div class='main'>my first main content</div>
<div class='hidden'>my first hidden content </div>
</div>
In the style sheet, set the class display properties:
.hidden {
display: none;
}
.main {
display: block;
}
Then, set up a click event listener in javascript. This will take a click event from anywhere on the page.
document.addEventListener('click', event => {
})
inside the event listener, place an if block to test whether the click event was received by an element that was inside a div of .container class:
if (event.target.parentElement.className=='container') {
}
I slightly modified this, see edit note and bottom.
If the click event got that far, the click must have been recieved by the visible div inside that container (since the hidden one cannot receive click events and they are the only two elements present.
So you can go ahead and swap the classes applied to the visible div that received the click:
event.target.classList.add('hidden');
event.target.classList.remove('main');
You now have to do the opposite to the other div in the container class to make that sibling visible. The problem is, you don't know whether the hidden class was the first child, or the second child of the container div. What you do know for sure, is that the other div is a sibling of the div you just made invisible.
So we can test to see if there is a next sibling using a conditional:
if (event.target.nextElementSibling) {
event.target.nextElementSibling.classList.add('main');
event.target.nextElementSibling.classList.remove('hidden');
}
If the hidden div followed the visible one, a nextElementSibling will be found and the classes swapped. If no nextElementSibling was found, we know the other div had to come before the one we already hid.
so, an else extension of that if block can be added to switch the classes on the previousElementSibling:
...} else {
event.target.previousElementSibling.classList.add('main');
event.target.previousElementSibling.classList.remove('hidden');
} // end else;
And you're done!
I wanted to explain the logic in detail to make sure you know what's going on, but it's not that complicated.
The advantage of an approach like this is that the single event listener will cope with 1, 2, or 1,000 pairs of divs and none need any special IDs or anything other than an initial class of .main or .hidden (and that they be grouped inside a .container div.
document.addEventListener('click', event => {
if (event.target.parentElement && event.target.parentElement.className=='container') {
event.target.classList.add('hidden');
event.target.classList.remove('main');
if(event.target.nextElementSibling) {
event.target.nextElementSibling.classList.add('main');
event.target.nextElementSibling.classList.remove('hidden');
} else {
event.target.previousElementSibling.classList.add('main');
event.target.previousElementSibling.classList.remove('hidden');
} // end else;
} // end parentElement if;
}) // end click listener;
.hidden {
display: none;
border: 1px solid red;
margin: 5px;
}
.main {
display: block;
border: 1px solid black;
margin: 5px;
}
<div class='container'>
<div class='main'>my first main content</div>
<div class='hidden'>my first hidden content </div>
</div>
<div class='container'>
<div class='main'>my second main content</div>
<div class='hidden'>my second hidden content </div>
</div>
Edit the conditional to detect whether the parent element of the click event was a .container div was modified to check that the event target has a parent AND that the parent is a .container div. This prevents an error if a click is received anywhere outside of the container div.
** Displaying an Opaque Overlay in Response to Click **
Again, this solution allows the functionality to be applied to limitless div elements without the need for independent ids. Again, two classed .main and .hidden are used to decide which div has been clicked from a single event listener applied to the document rather than to multiple divs.
The basic process of displaying, and then re-hiding the (originally hidden) .overlay div is very simple:
if (element.className == 'main') {
element.parentElement.getElementsByClassName('overlay')[0].classList.remove('hidden');
}
if (element.className == 'overlay') {
element.classList.add('hidden');
}
However, a problem arises because of the use of class names, rather than ids. Namely, when the overlay is displayed, a click on it may be received by a descendent element that does not have the class name .hidden. To work properly, every descendent of the overlay div would have to be given the .hidden class and the class swapped applied for ever element inside the .hidden div. This could get very complicated if the div had many child elements (perhaps with their own descendents).
Instead, when a click is received, the target element is inspected to see if it has a relevant class (main or hidden). If it does, the script flows to the simple class switching blocks. If it has no, or a different class name however, a do-while loop examined the parent element of the click to see if it was contained in a relevant (main or hidden) class. The loop continues searching up the document tree until either a relevant element is found, or there are no more parent elements to examine.
If a parent is found to have the required class name, a reference to the element is passed onto the class switching block.
do {
if (element && (element.className == 'overlay' || element.className == 'main')) {
// foundElementClassName = element.className;
break;
} // end if;
if (element.parentElement) {
element = element.parentElement;
} else {
break;
}
} while (element.className != "overlay" || element.className != "main");
The following working snippet demonstrates the functionality. In it, three divs (coloured pink) have an associated (initially) hidden overlay div, while a fourth div has no associated overlay and should ignore clicks.
If a click is made on a pink div, it's specific overlay appears. A click anywhere on the overlay dismisses it, regardless of whether the click was received by the overlay div itself, or by a child element or deeper descendent (e.g. clicking on the text of the overlay (which is in a child h2 element still allows the correct .overlay div to have its styles switched to hide it again.
document.addEventListener('click', (event) => {
let element = event.target;
do {
if (element && (element.className == 'overlay' || element.className == 'main')) {
// foundElementClassName = element.className;
break;
} // end if;
if (element.parentElement) {
element = element.parentElement;
} else {
break;
}
} while (element.className != "overlay" || element.className != "main");
// end do-while loop;
// if a relevant element was found, the element object is stored in element variable;
if (element.className == 'main') {
element.parentElement.getElementsByClassName('overlay')[0].classList.remove('hidden');
}
if (element.className == 'overlay') {
element.classList.add('hidden');
}
}) // end click event listener;
.main {
display: block;
width: 50%;
margin: 10px;
border: 1px solid black;
background: pink;
}
.overlay {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0px;
left: 0px;
width: 100%;
min-height: 100%;
bottom: auto;
z-index: 1;
background: rgba(255,255,0,0.7);
padding: 20px;
}
.hidden {
display: none;
}
.other {
display: block;
width: 50%;
margin: 10px;
border: 1px solid black;
background: yellow;
}
<div class="container">
<div class="main">Content of div 1. Content of div 1. Content of div 1. Content of div 1. Content of div 1. Content of div 1. Content of div 1. Content of div 1 </div>
<div class="overlay hidden"><h1>overlay for first pink div</h1> </div>
</div>
<div class="other">
some other content that doesn't have an associated overlay and that should ignore clicks.
</div>
<div class="container">
<div class="main">Content of div 2. Content of div 2. Content of div 2. Content of div 2. Content of div 2. Content of div 2. Content of div 2. Content of div 2. Content of div 2. Content of div 2.</div>
<div class="overlay hidden"><h1>overlay for SECOND pink div</h1> </div>
</div>
<div class="container">
<div class="main">Content of div 3. Content of div 3. Content of div 3. Content of div 3. Content of div 3. Content of div 3. Content of div 3. Content of div 3. Content of div 3. Content of div 3. </div>
<div class="overlay hidden"><h1>overlay for Third pink div</h1> </div>
</div>

Javascript - show a button inside of a DIV when clicked (and hide all others)

I have a list of DIVS that have buttons inside. By default, all buttons are hidden. When I click within a DIV area, the current button inside of this clicked DIV are should show (class='.db') AND all previously clicked/shown buttons should be hidden (class='.dn'). In other words, at any time there should be only one button (currently clicked) shown and all other should be hidden.
I want to use vanilla Javascript and tried this below, but it won't work. I feel there is some small error but don't know where.. Note - the DIVS and buttons don't have their own unique IDs (they only have the same CSS (.posted) classes.
PS - maybe it'd be better not to add this onClick="t();" to each DIV and use an 'addEventListener' function, but this is way too much for me ; )
CSS:
.dn {display:none}
.db {display:block}
.posted {
height: 50px;
width: 100px;
background-color: green;
border: 2px solid red;
}
HTML:
<div class="posted" onClick="t();">
<button class="dn">Reply</button>
</div>
<div class="posted" onClick="t();">
<button class="dn">Reply</button>
</div>
<div class="posted" onClick="t();">
<button class="dn">Reply</button>
</div>
JAVASCRIPT:
function t()
{
var x=document.getElementsByClassName("posted"),i,y=document.getElementsByTagName("button");
for(i=0;i<x.length;i++)
{
x[i].y[0].className="dn";
};
x.y[0].className='db';//make sure the currently clicked DIV shows this button (?)
}

You might want to read more about selector, how to select class, block level etc.
some link might be helpful:
CSS selector:
https://www.w3schools.com/cssref/css_selectors.asp
jQuery selector:
https://api.jquery.com/category/selectors/
Solution - Using jQuery:
$('.posted').on('click', function() {
//find all class called posted with child called dn, then hide them all
$('.posted .dn').hide();
//find this clicked div, find a child called dn and show it
$(this).find('.dn').show();
});
.dn {
display: none
}
.db {
display: block
}
.posted {
height: 50px;
width: 100px;
background-color: green;
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="posted">
<button class="dn">Reply1</button>
</div>
<div class="posted">
<button class="dn">Reply2</button>
</div>
<div class="posted">
<button class="dn">Reply3</button>
</div>
Solution - Pure js version:
//get list of div block with class="posted"
var divlist = Array.prototype.slice.call(document.getElementsByClassName('posted'));
//for each div
divlist.forEach(function(item) {
//add click event for this div
item.addEventListener("click", function() {
//hide all button first
divlist.forEach(function(el) {
el.getElementsByTagName('button')[0].classList.add('dn');
});
//show button of the div clicked
this.getElementsByTagName('button')[0].classList.remove('dn');
}, false);
});
.dn {
display: none
}
.db {
display: block
}
.posted {
height: 50px;
width: 100px;
background-color: green;
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="posted">
<button class="dn">Reply1</button>
</div>
<div class="posted">
<button class="dn">Reply2</button>
</div>
<div class="posted">
<button class="dn">Reply3</button>
</div>

You can do this with with plain JavaScript using Event Bubbling, querySelector and the element classList attribute like this.
Change your HTML to look like this:
<div class="posts">
<div class="posted">
<button class="dn">Reply</button>
</div>
<div class="posted" >
<button class="dn">Reply</button>
</div>
<div class="posted" >
<button class="dn">Reply</button>
</div>
</div>
Then use JavaScript like this:
var posts = document.querySelector('.posts');
var allPosted = document.querySelectorAll('.posted');
//clicks bubble up into the posts DIV
posts.addEventListener('click', function(evt){
var divClickedIn = evt.target;
//hide all the buttons
allPosted.forEach(function(posted){
var postedBtn = posted.querySelector('button');
postedBtn.classList.remove('db');
});
// show the button in the clicked DIV
divClickedIn.querySelector('button').classList.add('db')
});
You can find a working example here: http://output.jsbin.com/saroyit

Here is very simple example using jQuery .siblings method:
$(function () {
$('.posted').click(function () {
$('button', this).show();
$(this).siblings().find('button').hide();
});
});
https://jsfiddle.net/3tg6o1q7/

Making a div to display as none

I have this code which makes a div to display as none when anywhere outside the div is clicked. But my problem is I also want the link which makes the div to display block to also close the div if the div is displayed as block so I ran this code:
function show_div(x){
var box = document.getElementById(x);
if(box.style.display=='block'){
box.style.display='none';
} else {
box.style.display='block';
window.addEventListener('mouseup', function(event){
if(event.target != box && event.target.parentNode != box){
box.style.display='none';
}
});
}
}
But the link does not close the div. if I run it like this:
function show_div(x){
var box = document.getElementById(x);
if(box.style.display=='block'){
box.style.display='none';
} else {
box.style.display='block';
}
}
The link opens and closes the div, But I also want a click anywhere outside the div to close the div also. Please do anyone have a better Idea on how I can achieve this? Here is my HTML:
<a onclick="show_div('divd')" href="javascript:;">click</a>
<div id="divd">this is the div</div>

As Portal_Zii said, you'll probably need a wrapper/container for your div to hide it, but this example should give you a basic idea.
$(document).ready(function() {
var $div = $("#divd");
$("a").on("click", function() {
$div.toggle(); // this is to toggle div visibilty
});
$div.on("click", function(e) {
// prevent div from closing when clicking inside
e.preventDefault();
return false;
});
$div.parent().on("click", function() {
// hide div when user clicks inside div's parent element
$div.hide();
});
});
.container {
background: red;
height: 100px;
padding: 20px;
}
#divd {
background: blue;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
click
<div class="container">
<div id="divd">this is the div</div>
</div>

How to convert a <div> to collapsable panel?

As shown in the image below I want to collapse left blue panel
I am trying to create left Blue panel using HTML. But I do not have any idea, how to create collapsable panel?

Concept used
Execute a function when button is clicked.
Explanation of Code
First there are 2 buttons present on same location : myButton1 and myButton2
myButton2 which shows the div is currently invisible (display:none;).
when mybutton1 is clicked it reduces the width of "menu" div and also hides itself while making myButton2 visible. When myButton2 is clicked it restores the width of "menu" div and hides itself while making button1 visible.
function toggle1() {
document.getElementById("menu").style.width = "2px";
document.getElementById("myButton1").style.display = "none";
document.getElementById("myButton2").style.display = "block";
};
function toggle2() {
document.getElementById("menu").style.width = "100px";
document.getElementById("myButton2").style.display = "none";
document.getElementById("myButton1").style.display = "block";
};
#menu {
width: 100px;
height: 500px;
background: blue;
}
#myButton1 {
position: absolute;
}
#myButton2 {
position: absolute;
display: none;
}
<div id="container">
<input onclick="toggle1()" type="button" value="hide" id="myButton1"></input>
<input onclick="toggle2()" type="button" value="show" id="myButton2"></input>
<div id="menu">
</div>
</div>

This will give you a div and a button. By default, the div is collapsed but when you click the button, the div will expand to reveal the content. Clicking the button again will collapse it again.
HTML:
Panel Button
<div class="blue-panel">a blue panel</div>
CSS:
.blue-panel{overflow:hidden; max-height: 0;}
.blue-panel.active{max-height: 1000px;}
JS:
jQuery('.panel-toggle').click(function() {
jQuery('.blue-panel').toggleClass('active');
});

Overlay the div on the div of contact form

Following is my fiddle in which i made a div with class overlay and i am trying to do that when user clicks on submit button then that overlay class div appears on the div of contact form and on clicking close button that div hides and it shows the reset form again. Kindly let me know how can I make such kind of overlay on the contact form on submit button
http://jsfiddle.net/VqDKS/
.overlay
{
background-color: yellow;
height:200px;
width: 300px;
}

See this, edited with jQuery and CSS. Set the overlay to position: absolute and hide it before the form is submitted. Then remove it when the 'Close'-button is clicked.
http://jsfiddle.net/VqDKS/3/

CSS:
.overlay
{
background-color: yellow;
height:200px;
width: 300px;
position: absolute;
top: 0px;
z-index: 99;
display: none;
}
Jquery code:
function js()
{
alert('clicked submit: get typed name');
var name = $("#FN3").val();
$("#name").html( name );
$(".overlay").fadeIn()
return false;
}
$(document).ready(function(){
$(".close").click(function(){
$(".overlay").fadeOut();
$('#contact_form3 input[type="text"]').val('');
});
});
Make following change in HTML:
<input type="button" value="close" class="close">

You need to hide your overlay at the beginning just show the form. When clicked submit, show overlay and hide the form. Then when close is clicked hide the overlay and show the form.
It can be as :
function js()
{ alert('clicked submit: get typed name');
var name = $("#FN3").val();
$("#name").html( name );
$("#form-div").hide();
$(".overlay").show();
return false;
}
function closeOverlay(){
$("div.overlay").hide();
$("div#form-div").show();
}
please have a look here :
http://jsfiddle.net/injulkarnilesh/VqDKS/7/

Basically you need to set the contact form wrapper position property to relative and then just set position of your overlay to absolute, something like this:
.contact_wrapper { position: relative; }
.overlay { position: absolute; top: 0; left: 0; }
This way you will be sure that your overlay will be absolute positioned on the top of your contact form.
When page is loaded, we don't need the overlay, so you can add the following property:
.overlay { display: none; }
In your code, when you submit the form you are using onclick event to execute your handler.
Here you need to make overlay visible again, you can use .show() of jQuery:
$('.overlay').show();
And now you need to add event handler to deal with close button, you can simply add unique idintifier (e.g. class) to the element, then with jQuery you can trigger click event for this element and here you can hide your overlay.
$('.closeBtn').click( function() {
$('.overlay').hide();
});
By the way, you can read about .submit() and .ajax() methods in jQuery.
Here is a working jsFiddle.

I updated your fiddle a bit: http://jsfiddle.net/nweevers/VqDKS/8/
This is a way to do this. But then your form isn't still submitted.
The best way is to show the overlay after the post. And then you can hide the overlay with the button.
$overlay.on('click', 'input[type=button]', function() {
$overlay.hide();
});