How to hide previous div in javascript?

Question

I have 4 div. When I click on one of the divs the green shown will expand. Then I click on another diva and a green background with subtitles will also be shown. I mean, I want only one div to be expanded. For example, if I click the 3 div it expands me the content of the 3 diva. Then I click the 2 div and it expands me the content of the 2 diva and automatically hides the content of the previous div that was expanded. I hope that everone understand what I want to do.

<script>

function showHide(obj)
{

var nextObj=obj.nextSibling;
while(!nextObj.tagName) nextObj=nextObj.nextSibling;
nextObj.style.display = nextObj.style.display != 'block' ? 'block' : 'none';
}

</script>

.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>

`Uncaught SyntaxError: Unexpected token '<'"`?? – Medi Jul 07 '20 at 17:46 — Medi, Jul 07 '20 at 17:46

score 0 · Answer 1 · answered Jul 07 '20 at 17:55

There are a couple of errors in your code:

The divs weren't "closed"
It's not obj.nextSibling, but obj.nextElementSibling (there's a difference: What is the difference between node.nextSibling and ChildNode.nextElementSibling?)

After correcting these errors and adding the code for closing the other divs, the snippet works:

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;
}

<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>

I see now, I really gratefull that you help me. – Mateusz Wojno Jul 07 '20 at 17:59 — Mateusz Wojno, Jul 07 '20 at 17:59
@MateuszWojno happy days, buddy! :D – muka.gergely Jul 07 '20 at 18:01 — muka.gergely, Jul 07 '20 at 18:01

How to hide previous div in javascript?

1 Answers1