Can we use partial collapse concept in bootstrap 4?

Question

This code is for partial content collapse, but it doesn't work with bootstrap 4. What am I doing wrong?

#module {
  width: 500px;
}

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

#module p.collapsing[aria-expanded="false"] {
  height: 40px !important;
}

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

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







  Bacon Ipsum
  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.

user_4092075 · Answer

After searching on the internet for a few hours, I finally found that to make the above code compatible for Bootstrap 4, we only need to modify some of the CSS as follows:

#module {
  width: 500px;
}

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

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

#module #collapseExample.collapse:not(.show) {
  display: block;
  /* height = lineheight * no of lines to display */
  height: 4.5em;
  overflow: hidden;
}

#module #collapseExample.collapsing {
  height: 4.5em;
}







  Bacon Ipsum
  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.

user_233337 · Answer

I would recommend keeping it simple and placing a portion of your text into a separate paragraph. This will allow you to have very precise control over the text that is shown. Any kind of programmable solution will depend on word count, punctuation or simply chop off your text at specified length.

#module {
  width: 500px;
}

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

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







  Bacon Ipsum
  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.

user_14746945 · Answer

Here's what I used to expand and close partially. This totally work with Bootstrap 4. You can download the sample HTML / CSS / JavaScript snippets here:

https://iiiji.com/accordion-partial-collapse-expand-demo-template-bootstrap/

.partialcollapse .collapse {
    display: block;
    height: 120px !important;
    overflow: hidden;
}
.partialcollapse .collapsing {
    height: inherit!important;
}
.partialcollapse .collapse.show {
    height: auto !important;
} 
.partialcollapse .collapse+button:after {
    content: '+ Show More';
}
.partialcollapse .show+button:after, .partialcollapse .collapsing+button:after {
    content: '- Show Less';
}


  
    Accordion Title
    Accordion content goes here

Can we use partial collapse concept in bootstrap 4?

3 Answers