JSFiddle - React, Tailwind, and code Playground

by Frost819

HTML

<div class="dropdown">
   <div class="dropdown_title">
     <span>Toggle me</span>
   </div>
   <ul class="dropdown_list">
     <li class="dropdown_list--item">Items 1</li>
     <li class="dropdown_list--item">Items 2</li>
     <li class="dropdown_list--item">Items 3</li>
     <li class="dropdown_list--item">Items 4</li>
     <li class="dropdown_list--item">Items 5</li>
     <li class="dropdown_list--item">Items 6</li>
   </ul>
</div>

CSS

.dropdown {
  display: block;
  width: 250px;
  height: max-content;
}

.dropdown_list {
  
}

JavaScript

var test = document.getElementsByClassName('dropdown');
//console.log(test);

function myFunction() {
	let 
  	dropDownWrap = document.getElementsByClassName('dropdown'),
  	dropDownTitle = document.getElementsByClassName('dropdown_title'),
    dropDownList = document.getElementsByClassName('dropdown_list');
    
  for (var i = 0; dropDownTitle.length > 0; i++) {
  	console.log(dropDownTitle[i]);
  }
}