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?

#module {
  font-size: 1rem;
  line-height: 1.5;
}

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

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

#module a.collapsed:after {
  content: '+ Show More';
}

#module a:not(.collapsed):after {
  content: '- Show Less';
}

<div id="module" class="container">
  <h3>Bacon Ipsum</h3>
  <p class="collapse" id="collapseExample" aria-expanded="false">
    Bacon ipsum dolor amet doner picanha tri-tip biltong leberkas salami meatball tongue filet mignon landjaeger tail. Kielbasa salami tenderloin picanha spare ribs, beef ribs strip steak jerky cow. Pork chop chicken ham hock beef ribs turkey jerky. Shoulder
    beef capicola doner, tongue tail sausage short ribs andouille. Rump frankfurter landjaeger t-bone, kielbasa doner ham hock shankle venison. Cupim capicola kielbasa t-bone, ball tip chicken andouille venison pork chop doner bacon beef ribs kevin shankle.
    Short loin leberkas tenderloin ground round shank, brisket strip steak ham hock ham.
  </p>
  <a role="button" class="collapsed" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  </a>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Evars

I was considering this solution, however it changes your url with #collapseExample, which is not working for me. – Turkey

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

Sot

Answer 2

**I have created a custom component working fine for me**

    import React, { useState } from 'react';
    
    interface ItemCompProps {
      itemName: string;
      initialText: string;
    }
    const ItemComp: React.FC<ItemCompProps> = ({
      itemName,
      initialText,
    }) => {
      const [displayFullText, setDisplayFullText] = useState<boolean>(false);
    
      const toggleTextDisplay = () => {
        setDisplayFullText(!displayFullText);
      };
    
      return (
        <div>
          <h1>{itemName}</h1>
          <p>{displayFullText ? initialText : `${initialText.slice(0, 20)}...`}</p>
          {!displayFullText && (
            <a onClick={toggleTextDisplay}>
              Read More
            </a>
          )}
          {displayFullText && (
            <a onClick={toggleTextDisplay}>
              Read Less
            </a>
          )}
        </div>
      );
    };
    
    export default ItemComp;

IN OTHER COMPONENT

/* eslint-disable linebreak-style */
import ItemComp from '@/components/item';
export default function Facility() {

  return (
    <div>
      <ItemComp
        itemName='Item 1'
        itemText='11111Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
      />
      <ItemComp
        itemName='Item 2'
        itemText='222222Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
      />
    </div>
  );
}

Sergent

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review – Scandinavian