CODEWITHSUNDEEP
javascripthtmlcss
netjav
netjav

Reputation: 15

How to hide a div in javascript?

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>

Upvotes: 1

Views: 91

Answers (2)

Omar EL KHAL
Omar EL KHAL

Reputation: 171

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>

Upvotes: 1

Mr. Innovator
Mr. Innovator

Reputation: 95

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>

Upvotes: 0

Related Questions