Develop Reference

Toggle show/hide functions between multiple divs

I have a page on my site which has 3 separate 'hidden' divs. Each with it's own 'show/hide' button.
Currently... each div and button set functions independently.
Therefore... if all divs are shown (open) at the same time, they stack according to their respective order.
Instead of that, I would rather restrict the function a bit, so that only div can be shown (open) at a time.
Example: If Div 1 is shown, and the user then clicks the Div 2 (or Dive 3) button, Div 1 (or which ever div is open at the time, will close.
I am not sure how to adjust my code to make that all work together. I have tried a few ideas, but they were all duds. So I posted a generic 'independent' version below.
function show_Div_1() {
var div1 = document.getElementById("Div_1");
if (div1.style.display === "none") {
div1.style.display = "block";
} else {
div1.style.display = "none";
}
}
function show_Div_2() {
var div2 = document.getElementById("Div_2");
if (div2.style.display === "none") {
div2.style.display = "block";
} else {
div2.style.display = "none";
}
}
function show_Div_3() {
var div3 = document.getElementById("Div_3");
if (div3.style.display === "none") {
div3.style.display = "block";
} else {
div3.style.display = "none";
}
}
.div {
width: 270px;
height: 30px;
padding-left: 10px;
}
<button type="button" onclick="show_Div_1()">Div 1 - Red</button>
<button type="button" onclick="show_Div_2()" style="margin-left: 4px">Div 2 - Blue</button>
<button type="button" onclick="show_Div_3()" style="margin-left: 4px">Div 3 - Green</button>
<div id="Div_1" class="div" style="background-color:red; display: none;"></div>
<div id="Div_2" class="div" style="background-color:blue; display: none;"></div>
<div id="Div_3" class="div" style="background-color:green; display: none;"></div>

I would suggest using data attributes for a toggle. Why? you can use CSS for them and you can use more than just a toggle - multiple "values".
Here in this example I do your "click" but also added a double click on the button for a third value. Try some clicks and double clicks!
A bit of overkill perhaps but more than just "toggle" for example you could use this to show "states" of things like a stoplight or any number of things.
Use the grid display and move them by just adding a data attribute value and double click it to get it to go (using css) to some grid-area:, things like that.
const hideValues = {
hide: "hidden",
show: "showme",
double: "dblclick"
};
function dblClickHander(event) {
const targetSelecor = event.target.dataset.target;
const target = document.querySelector(targetSelecor);
const action = target.dataset.hideme == hideValues.double ? hideValues.hide : hideValues.double;
const toggleTargets = document.querySelectorAll('.toggle-target');
toggleTargets.forEach(el => {
el.dataset.hideme = hideValues.hide;
});
target.dataset.hideme = action;
}
function toggleEventHandler(event) {
const targetSelecor = event.target.dataset.target;
const target = document.querySelector(targetSelecor);
const showHide = target.dataset.hideme == hideValues.hide ? hideValues.show : hideValues.hide;
const toggleTargets = document.querySelectorAll('.toggle-target');
toggleTargets.forEach(el => {
el.dataset.hideme = hideValues.hide;
});
target.dataset.hideme = showHide;
}
/* set up event handlers on the buttons */
const options = {
capture: true
};
/* we do this first to prevent the click from happening */
const toggleButtons = document.querySelectorAll('.toggle-button');
toggleButtons.forEach(el => {
el.addEventListener('dblclick', dblClickHander, options);
});
toggleButtons.forEach(el => {
el.addEventListener('click', toggleEventHandler, options)
});
.toggle-target {
width: 270px;
height: 30px;
padding-left: 10px;
}
.toggle-target[data-hideme="hidden"] {
display: none;
}
.toggle-target[data-hideme="showme"] {
display: block;
}
.toggle-target[data-hideme="dblclick"] {
display: block;
border: solid 2px green;
padding: 1rem;
opacity: 0.50;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
}
.green-block {
background-color: green;
}
<button type="button" class="toggle-button" data-target=".red-block">Div 1 - Red</button>
<button type="button" class="toggle-button" data-target=".blue-block">Div 2 - Blue</button>
<button type="button" class="toggle-button" data-target=".green-block">Div 3 - Green</button>
<div class="toggle-target red-block" data-hideme="hidden">red</div>
<div class="toggle-target blue-block" data-hideme="hidden">blue</div>
<div class="toggle-target green-block" data-hideme="hidden">green</div>

This can be done in many ways. I think the best approach in your case could be
BUTTONS
<button type="button" onclick="show_div('Div_1')">Div 1 - Red</button>
<button type="button" onclick="show_div('Div_2')" style="margin-left: 4px">Div 2 - Blue</button>
<button type="button" onclick="show_div('Div_3')" style="margin-left: 4px">Div 3 - Green</button>
SCRIPT
function show_div(div_id) {
var thisDiv = document.querySelector('#'+div_id);
var thisState = thisDiv.style.display;
// close all in any cases
document.querySelectorAll('.div').forEach(function(el) {
el.style.display = "none";
});
// open this div only if it was closed
if (thisState == "none" ){
thisDiv.style.display = "block";
}
}

How to hide div when clicking outside of it Javascript? [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 2 years ago.
I am trying to make a "form" only visible after clicking another "button" with the following conditions:
The "form" should only be visible if you click the "button".
If you click either "outside" the form or click again the button: the form will become hidden again.
/* JAVASCRIPT */
const outer = document.getElementById('outer');
const inner = document.getElementById('inner')
outer.onclick = function() {
if (inner.style.visibility == 'visible') {
document.getElementById('inner').style.visibility = 'hidden';
} else {
document.getElementById('inner').style.visibility = 'visible';
}
}
const ignoreClickOnMeElement = document.getElementById('inner');
document.addEventListener('click', function(event) {
const isClickInsideElement = ignoreClickOnMeElement.contains(event.target);
if (!isClickInsideElement) {
// when uncommenting the line below everything stop working, rather then just closing if I click outside this div
/* document.getElementById('inner').style.visibility='hidden';*/
}
});
/* CSS */
* {
border: thin solid black;
}
<!-- HTML -->
<body>
<div class="outer" id="outer">
<button>Visible</button>
</div>
<div class="inner" id="inner" style="visibility: hidden;">
<form id="form">
<input type="number">
<input type="number">
</form>
</div>
</body>

If you use a delegated event listener bound to a higher node, such as the document body in this case you can determine which elements have been clicked based upon the event target.
let form=document.getElementById('form');
let bttn=document.querySelector('div.outer button');
document.body.addEventListener('click',e=>{
e.preventDefault();
e.stopPropagation();
if( ( e.target==bttn && form.parentNode.style.visibility!=='visible' ) || e.target==form || e.target.parentNode==form ){
form.parentNode.style.visibility='visible'
}else{
form.parentNode.style.visibility='hidden'
}
})
* {
border: thin solid black;
}
form{
height:100px;width:80%;background:pink
}
.inner{
height:200px;width:100%;
}
.outer{
width:100%;height:100px;
}
<div class="outer" id="outer">
<button>Visible</button>
</div>
<div class="inner" id="inner" style="visibility: hidden;">
<form id="form">
<input type="number">
<input type="number">
</form>
</div>

Javascript, Open/Close function

I'm very new to using Javascript and i'm struggling how I can achieve what I am after. I've created 4 buttons using;
<input type="button" name="answer" value="Brave" onclick="showDiv()">
My goal is that if you click on the button, it changes state and the div appears (got that far). If I click another button, i'd like the content to hide the previous div selected and show the one they had just clicked.
Any help/guidance would really be appreciated.
function showDiv() {
document.getElementById('BraveDiv').style.display = "block";
}
function showDiv1() {
document.getElementById('DeterminedDiv').style.display = "block";
}
function showDiv2() {
document.getElementById('CompassionateDiv').style.display = "block";
}
function showDiv3() {
document.getElementById('ConsiderateDiv').style.display = "block";
}
My aim is that if you was to click

function showDiv()
{
document.getElementById('new1').style.display = "block";
document.getElementById('Div1').style.display = "none";
document.getElementById('Div2').style.display = "none";
}
function showDiv1()
{
document.getElementById('Div1').style.display = "block";
document.getElementById('new1').style.display = "none";
document.getElementById('Div2').style.display = "none";
}
function showDiv2()
{
document.getElementById('Div2').style.display = "block";
document.getElementById('new1').style.display = "none";
document.getElementById('Div1').style.display = "none";
}

Your code attached won't achieve any of the results you're looking for, however, it's obvious what you're looking for.
You buttons should look like the following :
<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
Here, the role prevents the default behaviour of submit. The onclick tells the button what to do when you click it, and the "BraveDiv" is the parameter we will pass to the function, telling it which div to display.
The DIV associated with the above button, should look as follows :
<div id="BraveDiv" style="display: none;"> SOME CONTENT HERE </div>
Here you'll notice the ID is equal to the parameter we mentioned above.
And your JavaScript should work as follows :
<script>
function showDiv(elem){
document.getElementById(elem).style.display = "block";
}
</script>
I've attached a working snipped example as below, just click "Run code snippet" to view the snippet and test the code.
function showDiv(elem) {
document.getElementById(elem).style.display = "block";
}
<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
<button role="button" onclick="showDiv('CompassionateDiv')">Compassionate</button>
<div id="BraveDiv" style="display: none;"> SOME BRAVE CONTENT HERE </div>
<div id="CompassionateDiv" style="display: none;"> SOME COMPASSIONATE CONTENT HERE </div>
The above, however, will only SHOW YOUR DIVS.
The full jQuery solution to this (hide/show as per the tag) would be :
<script>
function showDiv(elem) { // When the button is pressed
$("div").each(function() { // For each Div
if ($(this).attr('id') != elem) { // If the Div's id is not equal to the parameter
$(this).css("display", "none");
} // HIDE IT
else {
$(this).css("display", "block"); // SHow It
});
</script>
If you are unfamiliar with jQuery and would prefer a JavaScript only solution, then :
<script>
function showDiv(elem){
var divsToCheck = ["BraveDiv", "CompassionateDiv"]; // Add to here to check more divs
for(let i = 0; i < divsToCheck.length; i++){
if(divsToCheck[i] == elem){
document.getElementById(divsToCheck[i]).style.display = "block";
}
else{
document.getElementById(divsToCheck[i]).style.display = "none";
}
}
</script>
Again I've attached a snippet below.
function showDiv(elem) {
var divsToCheck = ["BraveDiv", "CompassionateDiv"]; // Add to here to check more divs
for (var i = 0; i < divsToCheck.length; i++) {
if (divsToCheck[i] == elem) {
document.getElementById(divsToCheck[i]).style.display = "block";
} else {
document.getElementById(divsToCheck[i]).style.display = "none";
}
}
}
<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
<button role="button" onclick="showDiv('CompassionateDiv')">Compassionate</button>
<div id="BraveDiv" style="display: none;"> SOME BRAVE CONTENT HERE </div>
<div id="CompassionateDiv" style="display: none;"> SOME COMPASSIONATE CONTENT HERE </div>

function showDiv() {
document.getElementById('BraveDiv').style.display = "block";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv1() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "block";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv2() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "block";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv3() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "block";
}
This might not be the sleekest way of doing it, but will get you the results you want. As each button is pressed, all others will close.

You just need to set the display style of the remaining <div>s back to none. The simplest way to do this is to first set all of them to none, then the one you want visible to block:
Note: I’ve used a function which takes the id of the target <div> as a parameter to reduce the amount of code written, but you could easily copy-paste out to separate functions if you require.
function showDiv(divName) {
// First hide all the divs
document.getElementById('BraveDiv').style.display = 'none';
document.getElementById('DeterminedDiv').style.display = 'none';
document.getElementById('CompassionateDiv').style.display = 'none';
document.getElementById('ConsiderateDiv').style.display = 'none';
// Then show the div corresponding to the button clicked
document.getElementById(divName).style.display = 'block';
}
<input type="button" value="Brave" onclick="showDiv('BraveDiv')">
<input type="button" value="Determined" onclick="showDiv('DeterminedDiv')">
<input type="button" value="Compassionate" onclick="showDiv('CompassionateDiv')">
<input type="button" value="Considerate" onclick="showDiv('ConsiderateDiv')">
<div id="BraveDiv" style="display: none">BraveDiv</div>
<div id="DeterminedDiv" style="display: none">DeterminedDiv</div>
<div id="CompassionateDiv" style="display: none">CompassionateDiv</div>
<div id="ConsiderateDiv" style="display: none">ConsiderateDiv</div>
There are alternative ways of doing this which require less code, such as this method using a little CSS and document.querySelectorAll():
function showDiv(divName) {
// First remove the selected class from all divs in output-divs
document.querySelectorAll('#output-divs > .selected').forEach(element => {
element.classList.remove('selected');
});
// Then add it to the div corresponding to the button clicked
document.getElementById(divName).classList.add('selected');
}
.output-div:not(.selected) {
display: none;
}
<input type="button" value="Brave" onclick="showDiv('brave')">
<input type="button" value="Determined" onclick="showDiv('determined')">
<input type="button" value="Compassionate" onclick="showDiv('compassionate')">
<input type="button" value="Considerate" onclick="showDiv('considerate')">
<div id="output-divs">
<div class="output-div selected" id="brave">Brave</div>
<div class="output-div" id="determined">Determined</div>
<div class="output-div" id="compassionate">Compassionate</div>
<div class="output-div" id="considerate">Considerate</div>
</div>

$(document).ready(function() {
$("#btn1").click(function(){
showDiv('div1');
});
$("#btn2").click(function(){
showDiv('div2');
});
$("#btn3").click(function(){
showDiv('div3');
});
$("#btn4").click(function(){
showDiv('div4');
});
});
function showDiv(_divId){
$(".div-class").each(function() {
if(!$(this).hasClass('div-hide'))
$(this).addClass('div-hide');
});
$('#' + _divId).removeClass('div-hide');
}
.div-class {
min-height: 50px;
border: 1px solid #eee;
margin: 10px;
padding: 10px;
width: 100%;
}
.div-hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>
<button id="btn4">Button 4</button>
<div id="div1" class='div-class div-hide'><h3>Div1 Content </h3></div>
<div id="div2" class='div-class div-hide'><h3>Div2 Content </h3></div>
<div id="div3" class='div-class div-hide'><h3>Div3 Content </h3></div>
<div id="div4" class='div-class div-hide'><h3>Div4 Content </h3></div>

javascript expand/collapse text - collapse on default

I'm very inexperienced in javascript but have managed (with the help of google) to put together the following expandable/collapsible link
<script type="text/javascript">
function toggleMe(a) {
var e = document.getElementById(a);
if(!e) return true;
if(e.style.display == "none") {
e.style.display = "block"
}
else {
e.style.display = "none"
}
return true;
}
</script>
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
</p>
<p id="para1">
<strong><em>text text text text</em></strong>
</p>
The only problem with it is that it is expanded by default and I wanted it collapsed by default. Can anyone help with this? Thank you!
Also, if anyone knows how to get +/- signs next to the link that change depending on whether it is expanded or collapsed, that would be great.

<script type="text/javascript">
function toggleMe(a) {
var e = document.getElementById(a);
var toggleIcon = document.getElementById('toggle-icon');
if(!e) return true;
if(e.style.display == "none") {
e.style.display = "block";
toggleIcon.innerHTML = '-';
}
else {
e.style.display = "none";
toggleIcon.innerHTML = '+';
}
return true;
}
</script>
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
<span id="toggle-icon">+</span>
</p>
<p id="para1" style="display: none;">
<strong><em>text text text text</em></strong>
</p>

You can try putting in style statement the display option like below:
<p id="para1" style="display:none"><strong><em>text text text text</em></strong></p>
That can default collapse when you open your html, hope it help you...

Options 1:
Add this to your css to hide it by default:
#para1 {
display: none;
}
Options 2:
Move your script down, and call it initially toggleMe('para1'); so you will hide it first.
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
</p>
<p id="para1">
<strong><em>text text text text</em></strong>
</p>
<script type="text/javascript">
function toggleMe(a) {
var e = document.getElementById(a);
if(!e) return true;
if(e.style.display == "none") {
e.style.display = "block"
}
else {
e.style.display = "none"
}
return true;
}
toggleMe('para1');
</script>

Daniel has the correct answer to your question. This is a bit more than you asked for, but I think you will have a better time if you manipulate classes instead of element styles properties. Just makes it a bit more flexible.
In the example below I wrapped your code in a common element and then changed that element's class to achieve your desired effect. That let me easily add in your plus and minus too.
It's a little raw but you can see where this can take you. Hope it helps.
https://jsfiddle.net/6xoe1b94/
function toggleMe(a) {
var e = document.getElementById('wrapper');
if(! e.classList.contains('active')) {
e.classList.add('active');
}
else {
e.classList.remove('active');
}
}
#para1{
display:none;
}
.active #para1{
display:block;
}
#plus{
display:inline-block;
}
#minus{
display:none;
}
.active #plus{
display:none;
}
.active #minus{
display:inline-block;
}
<div id='wrapper'>
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" /><span id='plus'>+</span><span id='minus'>-</span>
</p>
<p id="para1">
<strong><em>text text text text</em></strong>
</p>
</div>

I added a solution that removes the javascript and css from your html. I also changed your expand/collapse element to a div instead of input. I've added a span element within the div that changes it's text content (either + or -) based on whether #para1 is displayed or not. Also, in css I added display: none; to #para1 (this initially hides the element), cursor: pointer; (shows it is clickable when the user hovers over it) user-select: none; (stop div from highlighting when user clicks on it).
// store elements
var expandEl = document.getElementById("expand");
var plusMinusEl = document.getElementById("plusMinus");
var para1El = document.getElementById("para1");
// toggle function: pass element as argument
function toggleMe(el) {
// check if element is hidden
if(el.offsetParent === null) {
plusMinusEl.textContent = "-";
el.style.display = "block"
}
else {
plusMinusEl.textContent = "+";
el.style.display = "none"
}
}
// click function for expand div
expandEl.addEventListener("click", function() {toggleMe(para1El)});
#expand {
font-size:18px;
color:#008080;
cursor: pointer;
user-select: none; /* stop div from highlighting */
}
#para1 {
display: none;
}
<div id="expand">
LINK TO EXPAND <span id="plusMinus">+</span>
</div>
<p id="para1"><strong><em>text text text text</em></strong></p>

Make div in div clickable with Javascript

Have a problem and can't get to solve it. Tried to use QuerySelectorAll and comma separating with GetElementsByClassName, but that didn't work, so I am wondering how to solve this problem.
I have this HTML:
<div class="area">Test title
<div class="some content" style="display: none">blablbala
<input></input>
</div>
<div class="two">This should be clickable too</div>
</div>
<div class="area">
Test title
<div class="some content">
blablbala
<input></input>
</div>
<div class="two">This should be clickable too</div>
</div>
JS:
function areaCollapse() {
var next = this.querySelector(".content");
if (this.classList.contains("open")) {
next.style.display = "none";
this.classList.remove("open");
} else {
next.style.display = "block";
this.classList.add("open");
}
}
var classname = document.getElementsByClassName("area");
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', areaCollapse, true);
}
http://jsfiddle.net/1BJK903/nb1ao39k/6/
CSS:
.two {
position: absolute;
top: 0;
}
So now, the div with classname "area" is clickable. I positioned the div with class "two" absolute and now the whole div is clickable, except where this other div is. If you click on the div with classname "two", it doesn't work (it does not collapse or open the contents). How can I make this work, without changing the structure?

One way is using a global handler, where you can handle more than one item by checking its id or class or some other property or attribute.
Below snippet finds the "area" div and pass it as a param to the areaCollapse function. It also check so it is only the two or the area div (colored lime/yellow) that was clicked before calling the areaCollapse.
Also the original code didn't have the "open" class already added to it (the second div group), which mean one need to click twice, so I change the areaCollapse function to check for the display property instead.
function areaCollapse(elem) {
var next = elem.querySelector(".content");
if (next.style.display != "none") {
next.style.display = "none";
} else {
next.style.display = "block";
}
}
window.addEventListener('click', function(e) {
//temp alert to check which element were clicked
//alert(e.target.className);
if (hasClass(e.target,"area")) {
areaCollapse(e.target);
} else {
//delete next line if all children are clickable
if (hasClass(e.target,"two")) {
var el = e.target;
while ((el = el.parentElement) && !hasClass(el,"area"));
if (targetInParent(e.target,el)) {
areaCollapse(el);
}
//delete next line if all children are clickable
}
}
});
function hasClass(elm,cln) {
return (" " + elm.className + " " ).indexOf( " "+cln+" " ) > -1;
}
function targetInParent(trg,pnt) {
return (trg === pnt) ? false : pnt.contains(trg);
}
.area {
background-color: lime;
}
.two {
background-color: yellow;
}
.area:hover, .two:hover {
background-color: green;
}
.some {
background-color: white;
}
.some:hover {
background-color: white;
}
<div class="area">Test title clickable 1
<div class="some content" style="display: none">blablbala NOT clickable 1
</div>
<div class="two">This should be clickable too 1</div>
</div>
<div class="area">Test title clickable 2
<div class="some content">blablbala NOT clickable 2
</div>
<div class="two">This should be clickable too 2</div>
</div>
<div class="other">This should NOT be clickable</div>

You need to find your two elements while you're binding classname, and bind that as well.
var classname = document.getElementsByClassName("area");
for(var i=0; i < classname.length; i++){
classname[i].addEventListener('click', areaCollapse, true);
var twoEl = classname[i].getElementsByClassName("two")[0];
twoEl.addEventListener('click', function(e) { console.log('two clicked'); });
}

If you want to use jQuery:
$('.two').click(function(){
//action here
});