How to add transition duration to to toggle css class

Question

I want to add a transition duration so that when you click the card the text underneath displays a bit slower. Right now if you click it immediately shows the text. It may be simple css thing but I can't seem to figure it out. I tried adding a transition duration to the .hidden class but nothing?

function openDropdown(dropdownId) {
  var allDropdowns = ["dropdown1", "dropdown2", "dropdown3", "dropdown4"];
  const index = allDropdowns.indexOf(dropdownId);
  allDropdowns.splice(index, 1);
  document.getElementById(dropdownId).classList.toggle("hidden");
  for (var i = 0; i < allDropdowns.length; i++) {
    document.getElementById(allDropdowns[i]).classList.add("hidden");
  }
}

.card-row {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-image: url(./images/forest.jpg);
  background-position: center;
  background-repeat: none;
  padding: 3em;
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1em;
  backdrop-filter: blur(5px);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 2px 3px 5px rgba(17, 17, 17, 0.3);
  margin: 1em;
  max-width: 150px;
  color: whitesmoke;
  text-align: center;
}
.card-glass {
  background-color: rgba(83, 83, 83, 0.1);
  box-shadow: 2px 2px 4px rgba(17, 17, 17, 0.5);
}
.card:hover {
  background-color: #202020;
}
.card i {
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0);
  font-size: 2.5em;
  color: #272727;
  padding: 1em;
}
.fa-html5:hover {
  color: red;
}
.fa-css3-alt:hover {
  color: dodgerblue;
}
.fa-js:hover {
  color: gold;
}
.fa-react:hover {
  color: fuchsia;
}
.hidden {
  display: none;

}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<div class="card-row">
        <div class="card-glass">
            <div class="card">
                <i onclick="openDropdown('dropdown1')" class="fab fa-html5"></i>
                <div id="dropdown1" class="hidden">HTML5 with better management of web applications and content.</div>
            </div>
        </div>
        <div class="card-glass">
            <div class="card">
                <i onclick="openDropdown('dropdown2')" class="fab fa-css3-alt"></i>
                <div id="dropdown2" class="hidden">Cascading Style Sheets with new features to bring your ideas to life.
                </div>
            </div>
        </div>
        <div class="card-glass">
            <div class="card">
                <i onclick="openDropdown('dropdown3')" class="fab fa-js"></i>
                <div id="dropdown3" class="hidden">JavaScript, the language of the web with new features in ES6</div>
            </div>
        </div>
        <div class="card-glass">
            <div class="card">
                <i onclick="openDropdown('dropdown4')" class="fab fa-react"></i>
                <div id="dropdown4" class="hidden">React and React Native framework for rapid development</div>
            </div>
        </div>
    </div>

Let me know if anything else is needed.

Yosef Tukachinsky · Accepted Answer · 2021-04-29T19:06:53.130

You should use css that you can transit. display property cannot be animated. try to use min-height

function openDropdown(dropdownId) {
  var allDropdowns = ["dropdown1", "dropdown2", "dropdown3", "dropdown4"];
  const index = allDropdowns.indexOf(dropdownId);
  allDropdowns.splice(index, 1);
  document.getElementById(dropdownId).classList.toggle("hidden");
  for (var i = 0; i < allDropdowns.length; i++) {
    document.getElementById(allDropdowns[i]).classList.add("hidden");
  }
}

.card-row {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height:300px;
  background-image: url(./images/forest.jpg);
  background-position: center;
  background-repeat: none;
  padding: 3em;
}
.card {
  transition: all .3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1em;
  backdrop-filter: blur(5px);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 2px 3px 5px rgba(17, 17, 17, 0.3);
  margin: 1em;
  max-width: 150px;
  color: whitesmoke;
  text-align: center;
  cursor: pointer;
}
.card-glass {
  background-color: rgba(83, 83, 83, 0.1);
  box-shadow: 2px 2px 4px rgba(17, 17, 17, 0.5);
}
.card:hover {
  background-color: #202020;
}
.card i {
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0);
  font-size: 2.5em;
  color: #272727;
  padding: 1em;
}
.card:hover .fa-html5 {
  color: red;
}
.card:hover .fa-css3-alt {
  color: dodgerblue;
}
.card:hover .fa-js {
  color: gold;
}
.card:hover .fa-react {
  color: fuchsia;
}

/* ADDED STAFF */
div[id^="dropdown"] {
  max-height: 150px;
  transition:max-height .3s ease;
  overflow: hidden;
  color: black;
}
.card:hover div[id^="dropdown"] {
    color: whitesmoke;
  }
div[id^="dropdown"].hidden {
  max-height:0;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<div class="card-row">
        <div class="card-glass">
            <div class="card">
                <i onclick="openDropdown('dropdown1')" class="fab fa-html5"></i>
                <div id="dropdown1" class="hidden">HTML5 with better management of web applications and content.</div>
            </div>
        </div>
        <div class="card-glass">
            <div class="card">
                <i onclick="openDropdown('dropdown2')" class="fab fa-css3-alt"></i>
                <div id="dropdown2" class="hidden">Cascading Style Sheets with new features to bring your ideas to life.
                </div>
            </div>
        </div>
        <div class="card-glass">
            <div class="card">
                <i onclick="openDropdown('dropdown3')" class="fab fa-js"></i>
                <div id="dropdown3" class="hidden">JavaScript, the language of the web with new features in ES6</div>
            </div>
        </div>
        <div class="card-glass">
            <div class="card">
                <i onclick="openDropdown('dropdown4')" class="fab fa-react"></i>
                <div id="dropdown4" class="hidden">React and React Native framework for rapid development</div>
            </div>
        </div>
    </div>

P.S. in the above snipped I edited few more things, on the way:

Add transition to color change
Change icon color on card hover, instead of icon hover. otherwise when card hovering but not icon its look bad
Set fixed height to the flex container, so it not change height when different items opened

lovely, thank you this solved my question! Thanks for the advice too, it does look better. — lache, Apr 30 '21 at 15:11

How to add transition duration to to toggle css class

1 Answers1