Bootstrap 4: Display two lines followed by a Read More expandable link

Question

I am following this amazing guide to display two lines of text, and give the user a link to "Read More". The transitions are not working as expected. Can someone point out what I am doing wrong here?

Answer 1

Your code might work in bootstrap 3. But since you're using bootstrap 4 try the below.

Replace this

#module p.collapse[aria-expanded="false"] {
  display: block;
  height: 3rem !important;
  overflow: hidden;
}

#module p.collapse.show[aria-expanded="false"] {
  height: 3rem !important;
}

with this

#module #collapseExample.collapse:not(.show) {
  display: block;
  height: 3rem;
  overflow: hidden;
}

#module #collapseExample.collapsing {
  height: 3rem;
}

Fiddle

Also just to remind you that ::after is a Pseudo-element so use it with double colon notation