Show Hide Menu Toggle Button Opacity and Display Block

Question

im trying to show hide toggle this submenu button trigger and was trying to have it animated by opacity and have the display none so that the height adjusts accordingly and smoothly upon open/close.

Need help, Thank you.

Javascript

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function () {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.opacity === "100" , dropdownContent.style.display === "block"
       ) {
      dropdownContent.style.opacity = "0" , dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.opacity = "100" , dropdownContent.style.display = "block";
    }
  });
}

https://jsfiddle.net/ekofz58t/

Answer 1

Try to use opacity and visibility combination instead of with display property in css and doesn't need a loop for single element, use [0] index in elementsbyclassname selector

const but = document.getElementsByClassName('dropdown-btn')[0];

const list = document.getElementsByClassName('dropdown-container')[0];

but.onclick = _=> list.classList.toggle('show')

.expmenuico path{
    fill: #808080;
}


.dropdown-btn {
  display:block;
  font-family:libre-baskerville;
  font-weight: 500;
    font-size: 54px;
    font-weight: 300;
  opacity:100%;
    display: block;
    color: #808080;
  text-decoration: none;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.dropdown-btn:hover{
 background: linear-gradient(to right, #f003ff,#ffd801,#ff4f03);
  background-size: 400% 200%;
  animation: rainbow 2s ease-in-out infinite;
  background-clip: text;
  -webkit-background-clip:text !important;
color: transparent !important;
  transition: color .2s ease-in-out;

}

@keyframes rainbow { 
  0%{background-position:left}
  50%{background-position:right}
  100%{background-position:left}

}

div.show{
  opacity:1;
  transform:scale(1) translateY(0);
  visibility:visible;
}

.dropdown-container {
   transition: opacity,transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  position:absolute;
  opacity:0;/* always use 0 or 1 or .5*/
  font-size:40px;
  background-color:lightgrey;
  padding-left: 8px;
  transform-origin:top;
  transform:scale(0.99) translateY(-0.7em);
  visibility:hidden;
}
.dropdown-container a{
  
font-family:libre-baskerville;
  font-weight: 500;
    font-size: 54px;
    font-weight: 300;
    display: block;
    color: #808080;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
  letter-spacing:-2px;
  text-align:left;
  text-decoration:none;

}

.dropdown-container a:hover{
  color:transparent !important;
 
}
.dropdown-container li{
    list-style-type: none;
}

.dropdown-container li:hover{
    background: linear-gradient(to right, #f003ff,#ffd801,#ff4f03);
  background-size: 400% 200%;
  animation: rainbow 2s ease-in-out infinite;
  background-clip: text;
  -webkit-background-clip:text !important;
color: transparent !important;
  transition: color .2s ease-in-out;
  
}


/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

  <button class="dropdown-btn">Dropdown
    <svg class="expmenuico" width="44" height="28" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg><i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <li><a href="shop">Line 1</a></li>
    <li><a href="shop">Line 2</a></li>
    <li><a href="shop">Line 3</a></li>
    <li><a href="shop">Line 4</a></li>
  </div>
<p>*Height Checker*</p>