0

I'm trying, without using more javascript and CSS only, to figure out why clicking on one of the list items doesn't show the expanded text by fading it in and out rather than it just appearing immediately. The code uses a transition duration and then makes the expanded element visible.

I know you can't have a transition duration from hidden to visible, but you can on opacity - but it still doesn't transition.

Can someone explain what's going on here, and come up with preferably a non-javascript solution?

Thanks for any help here - find the code and codepen below:

let moduleDescriptions = document.querySelectorAll('.course-lesson');

for (let description of moduleDescriptions) {
  description.addEventListener("click", function(){
    description.classList.toggle("open");
    description.querySelector('.expanded-description').classList.toggle("open");
  });
}
.course-lesson {
  flex-basis: 100%;
  text-align: left;
  padding: .5em;
  margin: 2px 5px 0 5px;
  background: #fff;
  position: relative;
  font-weight: 300;
  transition-duration: 0.3s;
  transition: 0.3s ease all;
}
course-lesson * {
  transition-duration: 0.3s;
  transition: 0.3s ease all;
}
.expanded-description.open {
  display: block;
  visibility: visible;
  transition-duration: 0.3s;
  opacity: 1;
  transition: visibility 0.3s linear,opacity 0.3s linear;
}
/* Relevant code above */
.course-section {
  list-style-type: none;
  padding: 0;
  background: #15a669;
  display: flex;
  flex-flow: row wrap;
}
.course-section:not(:first-of-type) {
  margin-top: 25px;
}
.course-section h3 {
  padding: .5em;
  text-align: left;
  font-size: 18px;
  font-weight: 400;
  flex-basis: 100%;
  background: #15a669;
  margin: 5px 5px 0 5px;
  color: #fff;
}
.course-lesson:hover {
  background: #f2f2f2;
  cursor: pointer;
}
.course-lesson:first-of-type {
  margin-top: 0;
}
.course-lesson:last-of-type {
  margin-bottom: 5px;
}
.course-lesson.type-video:before {
  content: '\f144';
  font-family: FontAwesome;
  margin-right: .5em;
}
.course-lesson.type-file:before {
  content: '\f15c';
  font-family: FontAwesome;
  margin-right: .5em;
}
.course-lesson:after {
  content: '\f0d7';
  position: absolute;
  right: .5em;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: FontAwesome;
}
.course-lesson.open:after {
  content: '\f0d8';
}
.expanded-description {
  padding: .5em 1em 0 0;
  display: none;
}
<ul class="course-section">
  <h3>title</h3>
  <li class="course-lesson type-video">Intro
    <div class="expanded-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </li>
  <li class="course-lesson type-video">more info here
    <div class="expanded-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </li>
</ul>

Codepen: https://codepen.io/anon/pen/dxVzyX

Update: any ideas, anyone?

user8758206
  • 2,106
  • 4
  • 22
  • 45
  • Note: the answer from this post seems to work but not for my code https://stackoverflow.com/questions/27900053/css-transition-with-visibility-not-working – user8758206 Aug 03 '19 at 07:24

1 Answers1

2

you are changing the display from none to block and transition will not work on it. true code is : `

.course-lesson {
    flex-basis: 100%;
    text-align: left;
    padding: .5em;
    margin: 2px 5px 0 5px;
    background: #fff;
    position: relative;
    font-weight: 300;
    transition-duration: 0.3s;
    transition: 0.3s ease all;
    height: 20px;
}
.expanded-description {
    padding: .5em 1em 0 0;
    opacity: 0;
    visibility: hidden;
}
.course-lesson.open {
    height: 70px;
}

`

Sahar Ebrahimi
  • 115
  • 5
  • thanks, but your solution uses a fixed height. Removing the height seems to remove the transition - can this be achieved without fixes heights? – user8758206 Aug 03 '19 at 07:45