Question 46106 in CSS Question posted in
Some basic documentation can be found here.

Show Hide Menu Toggle Button Opacity and Display Block – CSS

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/

Tags:

2

Answers


  1. 0

    There is a problem with the condition in your code where you are checking if the opacity is equal to 100 and the display is equal to "block" using the comma operator (,). The comma operator will evaluate both expressions and return the result of the last expression, which in this case is the display value.

    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 === "1" && 
     dropdownContent.style.display === "block") {
        dropdownContent.style.opacity = "0";
        setTimeout(function() {
           dropdownContent.style.display = "none";
         }, 300);
 } else {
       dropdownContent.style.display = "block";
       setTimeout(function() {
       dropdownContent.style.opacity = "1";
      }, 1);
}
 });
}

    I am using setTimeout to delay setting the display or opacity property to allow the CSS transition to occur smoothly. When the display property is set to "none", the element is immediately removed from the document flow, and there is no transition animation. NOTE: You can make your own changes in those.

    Hope this helps

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search