How to hide a div in javascript?

Question

I have a problem. Everything work, but I also want to hide extand div if I click him.For example I click button 3 and div extands and I click one again and div hide contain. I try everything but it doesn't work. I wrote many function but it doesn't I hope someone help me. This function in javascript is OK, but I have to add some code that div hide contain.

          function showHide(obj) {
  const nextObj = obj.nextElementSibling;
  const dropDowns = document.querySelectorAll('.drop')
  dropDowns.forEach(e => {
 
     e.style.display = 'none';
  })
    nextObj.style.display = 'block';
     
}

.iptv{
    width:200px;
    height:50px;
background-color:blue;
margin-bottom:10px;
color:white;
margin-left:auto;
margin-right:auto;
}

.drop{
    background-color:green;
    width:200px;
    height:50px;
    margin-left:auto;
margin-right:auto;
}

a{
    text-decoration: none;
    color:white;
}

    <body>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button1</div>
<div class="drop" style="display:none">
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>

<div class="down">
<div onclick="showHide(this)" class="iptv">Button2</div>
<div class="drop" style="display:none">
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>

<div class="down">
<div onclick="showHide(this)" class="iptv">Button3</div>
<div class="drop" style="display:none">
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button4</div>
<div class="drop" style="display:none">
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>
</body>

follow w3school . you can check the link w3schools.com/howto/… — نور
– نور, Commented Jul 8, 2020 at 10:05

Omar EL KHAL · Accepted Answer · 2020-07-08 11:05:55Z

1

you can use toggle()

  function showHide(obj) {
    const nextObj = obj.nextElementSibling;
    nextObj.classList.toggle('displaydrop');
}

    .iptv{
    width:200px;
    height:50px;
    background-color:blue;
    margin-bottom:10px;
    color:white;
    margin-left:auto;
    margin-right:auto;
 }

.displaydrop{
    display: none;
}
.drop{
    background-color:green;
    width:200px;
    height:50px;
    margin-left:auto;
    margin-right:auto;

 
}

a{
    text-decoration: none;
    color:white;
}

<body>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button1</div>
<div class="drop displaydrop" >
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>

<div class="down">
<div onclick="showHide(this)" class="iptv">Button2</div>
<div class="drop displaydrop" >
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>

<div class="down">
<div onclick="showHide(this)" class="iptv">Button3</div>
<div class="drop displaydrop" >
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button4</div>
<div class="drop displaydrop" >
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>
</body>

edited Jul 8, 2020 at 11:05

answered Jul 8, 2020 at 10:25

Omar EL KHAL

1711 gold badge4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rounin Over a year ago

.classList.toggle() is absolutely the right approach, but if you are toggling classes like this, then you don't need inline styles like: style="display:none". It would be cleaner to add these style declarations to the classes you are toggling.

Rounin Over a year ago

Give Om EL a little time, @netjav - this answer is on the right track and with a little work it can be a model answer.

Mr. Innovator · Accepted Answer · 2020-07-08 10:44:41Z

In your code snippet, the nextObj.style.display = 'block'; has no conditionals so even if you click on the button again, it will always set the element to block. Here is the solution

var count = 0;
function showHide(obj) {
  const nextObj = obj.nextElementSibling;
  const dropDowns = document.querySelectorAll(".drop");
  dropDowns.forEach((e) => {
    e.style.display = "none";
  });
  if (count % 2 == 1) {
    nextObj.style.display = "none";
    count++;
  } else {
    nextObj.style.display = "block";
    count++;
  }
}

.iptv{
    width:200px;
    height:50px;
background-color:blue;
margin-bottom:10px;
color:white;
margin-left:auto;
margin-right:auto;
}

.drop{
    background-color:green;
    width:200px;
    height:50px;
    margin-left:auto;
margin-right:auto;
}

a{
    text-decoration: none;
    color:white;
}

<body>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button1</div>
<div class="drop" style="display:none">
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>

<div class="down">
<div onclick="showHide(this)" class="iptv">Button2</div>
<div class="drop" style="display:none">
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>

<div class="down">
<div onclick="showHide(this)" class="iptv">Button3</div>
<div class="drop" style="display:none">
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button4</div>
<div class="drop" style="display:none">
<a href="home">Home</a>
<a href="About">About</a>
<a href="Contact">Contact</a>
</div>
</div>
</body>

Collectives™ on Stack Overflow

How to hide a div in javascript?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related