CODEWITHSUNDEEP
javascripthtmljquery
Sercan Aslan
Sercan Aslan

Reputation: 273

Vanilla JavaScript slideToggle to next item

I want to make dropdown item using vanilla js that has the same jQuery functionality with the next method. Because same class name not working with vanilla js

var button = document.querySelector('.ms-dropdown');

button.addEventListener('click', function(event) {

  var next = this.nextElementSibling;

  if (next.style.display == "none") {
    next.style.display = "block";

  } else {
    next.style.display = "none";
  }
});
<div class="ms-dropdown p-3">
  <div class="row no-gutters align-items-center">
    <div class="col-auto"><img src="images/tr-flag.png" alt="" /></div>
    <div class="col-auto ml-2">Budesliga <span>(16)</span></div>
  </div>
</div>
<div style="display:none">
  asdfasdf
</div>
<div class="ms-dropdown p-3">
  <div class="row no-gutters align-items-center">
    <div class="col-auto"><img src="images/tr-flag.png" alt="" /></div>
    <div class="col-auto ml-2">Budesliga <span>(16)</span></div>
  </div>
</div>
<div style="display:none">
  asdfasdf
</div>

Upvotes: 0

Views: 147

Answers (2)

Mustafa Reda
Mustafa Reda

Reputation: 376

Please try this

document.querySelectorAll('.ms-dropdown').forEach(function(item,i){
  item.addEventListener('click',function(){
    var next = this.nextElementSibling;
    next.style.display = next.style.display == 'none' ? 'block' : 'none';
  });
});

Upvotes: 1

Khant Min Si Thu
Khant Min Si Thu

Reputation: 328

MayBe Or Maybe not What you looking for

var button = document.querySelectorAll('.ms-dropdown');

for(let i = 0 ; i < button.length;i++){
button[i].addEventListener('click', function(event) {

  var next = this.nextElementSibling;

  if (next.style.display == "none") {
    next.style.display = "block";

  } else {
    next.style.display = "none";
  }
  })
};

Upvotes: 1

Related Questions