Onclick Show Div, But Hide When Other One Is Clicked

How to hide one div and show another div using button onclick?

1) Inside onclick, you don't have to use "javascript:", that is implied.

2) You check for "display: block", I always check for "display: none" (Because the display can also be "inline-block", etc.)

Try this:

function switchVisible() {            if (document.getElementById('Div1')) {
                if (document.getElementById('Div1').style.display == 'none') {                    document.getElementById('Div1').style.display = 'block';                    document.getElementById('Div2').style.display = 'none';                }                else {                    document.getElementById('Div1').style.display = 'none';                    document.getElementById('Div2').style.display = 'block';                }            }}

#Div2 {  display: none;}

<div id="Div1">Div 1</div><div id="Div2">Div 2</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>

Show Div by clicking on button, hide others

You just need to show the current div first on button click like:

function showOne(id) {    $('#' + id).show();    $('.hide').not('#' + id).hide();}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button type="button" onclick="showOne('1')">Europe</button><br><button type="button" onclick="showOne('2')">USA</button><div class='hide' id='2'>About USA</div><div class='hide' id='1'>About Europe</div>

I want to hide all other div's when i click on one div

Something like that ?

const AlldivTest = document.querySelectorAll('.test');
document.querySelector('#Map').onclick =e=>{  if (!e.target.matches('area')) return;  e.stopPropagation();
  AlldivTest.forEach(d=>{    if (d.id===e.target.dataset.elm)      { d.style.display = (d.style.display==='none') ? 'block' : 'none' }    else      { d.style.display = 'none' }  })}

.test { display: none; border:1px solid grey; padding: 5px 10px }img { width:550px; height:550px }

<div class="div-voog">  <img class="map" src="images/tekening-oog-vrouw-550px.jpg" alt="" usemap="#Map" />  <map name="Map" id="Map">    <area data-elm="vooglid" alt="" title="" href="#" shape="poly"      coords=170,251,159,253,140,251,134,249,126,244,121,241,118,237,114,226,113,221,118,214,128,204,141,195,160,187,176,178,194,171,208,165,230,157,249,155,268,153,284,151,300,151,326,154,341,158,358,168,371,178,380,190,394,209,402,221,408,235,412,244,403,247,392,242,378,231,366,219,347,207,334,203,316,199,286,199,263,203,246,208,221,218" />    <area data-elm="vwimpers" alt="" title="" href="#" shape="poly"      coords="170,251,159,253,140,251,134,249,126,244,121,241,118,237,114,226,113,221,118,214,128,204,141,195,160,187,176,178,194,171,208,165,230,157,249,155,268,153,284,151,300,151,326,154,341,158,358,168,371,178,380,190,394,209,402,221,408,235,412,244,403,247,392,242,378,231,366,219,347,207,334,203,316,199,286,199,263,203,246,208,221,218" />    <area data-elm="vwenkbrauw" alt="" title="" href="#" shape="poly"      coords="43,157,62,120,84,103,114,85,132,75,151,65,191,47,204,38,232,31,268,31,298,31,317,31,339,33,365,42,390,47,408,51,429,59,445,61,467,69,484,74,501,85,504,127,498,141,494,146,471,136,446,123,432,119,412,113,396,108,376,100,362,96,354,93,334,90,321,90,308,89,295,87,271,83,260,81,232,75,218,74,207,73,192,73,181,76,150,95,122,109,102,118,78,138,62,149,54,158,49,163,47,167" />    <area data-elm="vooghoek" alt="" title="" href="#" shape="poly"      coords="388,275,396,270,401,270,407,266,408,263,411,258,420,263,425,269,428,273,432,278,435,280,434,282,434,285,422,284,414,279" />  </map></div>
<div class="test" id="vooglid"> Symptoom ooglid</div><div class="test" id="vwimpers"> Symptoom wimper</div><div class="test" id="vwenkbrauw"> Symptoom wenkbrauw</div><div class="test" id="vooghoek"> Symptoom ooghoek</div>

Show and hide divs when click button

The JS toggle function is good for toggling classes on and off.

Here's a simple example

let btn = document.getElementById("btn-login");
let div = document.getElementById("loglog");

btn.addEventListener("click", () => {
    div.classList.toggle('hide');
})

.hide {
  display: none;
}

<button id="btn-login">Unshow/show</button>
<div id="loglog">Stuff to unshow on button click and show on the next button click</div>

How to show hidden div onclick of button and hide when not in focus using JS

you can use this code :

function openCardsList() {
    let window = document.getElementById("anchor-cards-list");
    window.style.display = "block";
  }
  function hideDiv(){
    let window = document.getElementById("anchor-cards-list");
    window.style.display = "none";
  }

and add onclick event to parent div

div onclick="hideDiv()" style="height: 100vh;">
  <div class="collapse" id="anchor-cards-list">Lorem Ipsum</div>
</div>

Show element onclick and hide all the others in javascript

At the moment you're toggling the visibiliy of your team-member-info elements based on their visibility property. This will make a single one visible by clicking on it's related team-member element - and invisible if it's clicked again.

What you can do is upon clicking make all team-member-info elements invisible first and subsequently just one element visible.

Here's an example:

const teamMember = document.getElementsByClassName("team-member");
const teamMemberInfo = document.getElementsByClassName("team-member-info");
for (let i = 0; i < teamMember.length; i++) {
  teamMember[i].addEventListener("click", function() {
    for (let a = 0; a < teamMemberInfo.length; a++) {
      teamMemberInfo[a].style.display = "none";
    }
    teamMemberInfo[i].style.display = "block";

  });
}

.team-member-info {
  display: none;
}

<div class="team-member-info">
  <div>Some text</div>
</div>

<div class="team-member-info">
  <div>Some other text</div>
</div>
<div class="team-member">
  <img src="https://picsum.photos/id/237/200/300">
</div>

<div class="team-member">
  <img src="https://picsum.photos/id/27/200/300">
</div>

---

Related Topics