Is it feasible to implement the partial collapse concept in Bootstrap 4?

I'm trying to create a partial content collapse feature, but it seems to not be working with bootstrap 4. Can anyone point out what I might be doing incorrectly?

#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';
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<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>

htmlcssbootstrap-4accordion

Answer №1

After spending hours scouring the internet, I finally discovered that to update the above code for Bootstrap 4 compatibility, we just need to tweak some of the CSS like so:

#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;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<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>

Answer №2

To enhance readability, my suggestion would be to keep your content concise and consider breaking it into smaller paragraphs. By doing so, you can maintain precise control over the displayed text. If you opt for a programmable approach, factors like word count, punctuation, or truncating text at a specific length will come into play.

#module {
  width: 500px;
}

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

#module a:not(.collapsed):after {
  content: '- Show Less';
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div id="module" class="container">
  <h3>Bacon Ipsum</h3>
  <p class="excerpt">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.</p>
  <p class="collapse" id="collapseExample" aria-expanded="false"> 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>

Answer №3

Check out this effective method I used to partially expand and close a section. It's perfectly compatible with Bootstrap 4. For the sample HTML / CSS / JavaScript snippets, you can access them at the following link:

.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';
}

<div class="accordion partialcollapse" id="partialcollapse">
  <div id="collapse-one" class="collapse" aria-labelledby="headingOne" data-parent="#partialcollapse">
    <h4>Accordion Title</h4>
    <p>Accordion content goes here</p>
  </div>
  <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-one" aria-expanded="true" aria-controls="collapse-one"> </button>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Jquery draggable droppable does not support displaying multiple divs simultaneously

I tried to implement the jquery ui draggable and droppable features to display 3 divs within a designated area. Below is the code snippet: --CSS: #content-1 { width: 200px; height: 100px; border: 1px solid red; display: none; } #content-2 { width: ...

javascriptjquerycss

Having trouble with the Jquery animate() function?

I recently developed a jQuery animation where clicking on specific buttons triggers a hidden div to slide from left: -650px; to left: 0px;. You can see an example by clicking here. However, I've noticed that when another button is clicked to reveal a ...

javascriptjquerycss

Troubleshooting CSS Display Problem on Chrome and Firefox

While working on the design of a website offline, everything seemed to be running smoothly. However, upon uploading it to the server, various issues began to arise. Initially, the file loaded correctly upon first visit. Unfortunately, after reloading the ...

htmlcssfirefoxgoogle-chrome

Use checkboxes to switch specific divs on and off based on their two assigned classes

Hey, I'm trying to implement some code with a specific structure: Initially, a main div is opened and checkboxes are created using a foreach loop. A checkbox is generated for each 'model' in an array. <div id='coltext'> & ...

phpjavascriptjquerycss

The backend error message isn't triggering an alert!

My current issue involves using jQuery to execute a .php file. Whenever an error occurs in the backend, I want to display an alert message with the error details. However, when intentionally submitting with an error, no alert pops up and it just proceeds t ...

javascriptphpjqueryhtmldatabase

Enhance your viewing experience by magnifying a specific element, all while maintaining full control to navigate

Is it possible to create a zoom effect on a webpage that focuses on one specific element while still allowing for navigation and scrolling? I have searched online for plugins like Fancybox and Zoomooz, but none of them offer the functionality I need. I sp ...

javascriptjqueryhtmlcss

Encountering difficulties with saving form data to a MySQL database in a Spring Boot Thymeleaf application

After creating a simple CRUD functionality using Spring Boot and Thymeleaf, I encountered an issue where the form was not saving values to the database upon submission. Below is my controller: @Controller public class ClientController { private stat ...

htmlmysqlspringspring-bootspring-data

The Bootstrap datepicker functions properly when used in plain HTML, but encounters issues when implemented within the .html()

Using HTML: <input class="m-ctrl-medium date-picker" size="16" type="text" id='lateETD1' name="dateRecv" value=""/> Not working with script: var ETD = $("#ETD"); ETD.html("<input class='m-ctrl-medium date-picker' id='la ...

javascriptjqueryhtmlbootstrap-4

Spin the object at regular intervals

Recently, I stumbled upon this interactive Pen: https://codepen.io/golle404/pen/BoqrEN that caught my eye. I thought it would be interesting to make the object move every few seconds. My first attempt involved using the following code snippet: setTimeout( ...

javascripthtmlcss

Is there a way to save an HTML page and its accompanying files on an Android device?

I am currently working on a project that requires downloading the source code of a webpage along with all internal files such as images, CSS, and JavaScript from a given link. Once downloaded, I will need to open this HTML file in a webview while offline. ...

javascriptandroidhtmlcssjsoup

What is the best way to retrieve both the start and end date values from a React date range picker component

I have integrated a date range picker npm package called react-date-range into my code. On my screen, there is an "Apply Dates" button. When this button is clicked, I want to retrieve the selected date range value. How can I achieve this onclick event? ...

javascripthtmldatepickerreactjsnpm

When you hover over the Dropdown Menu, the Hoverable Dropdown Menu will automatically close

I am currently working on creating a dropdown menu that pops up when hovering over an item. However, I am facing two challenges: Once my mouse moves away from the item, the dropdown disappears. Therefore, I would like the dropdown to remain visible as lo ...

htmlcss

Utilize the dropdown menu across all table cells in a table

My p-table has a unique feature - the last column contains three dots that trigger a dropdown menu when clicked. The only issue is that the fixed position of the dropdown menu does not align properly with the td element in each row. Check out the HTML cod ...

htmlcssangulartypescript

Dynamically linking a video URL to the <video> tag in real-time

How can I dynamically assign a video URL to the <video> tag so that the video will display in the player immediately? This is my current code: <script> jQuery( '#the-video' ).children( 'source' ).attr( 'src', &apo ...

htmljqueryjquery-pluginshtml5-video

Updating ListItemText styles in MUI when active with react-router

I am currently using ListItem from Material-UI. I am attempting to increase its font weight when it is active, but for some reason the font-weight property does not seem to have any effect. Below you will find the code snippet: <List component=&a ...

cssreactjsmaterial-ui

Is there a way to make my item reach a height of 100%?

I've created a unique Wordpress theme and I'm looking to make an element 100% height to fill the remaining available space. Here is the HTML code snippet: <header id="masthead" class="navbar navbar-default" role="banner" style=" backgrou ...

htmlcsstwitter-bootstrap

How to monitor multiple items using the mouseleave event in jQuery

I am currently trying to achieve a specific effect by keeping the green border visible for the active menu item when hovering over the dropdown. The issue I am encountering is that the border disappears when moving the cursor over the dropdown, which is no ...

jquerycssanimation

Toggle visibility without CSS

I have a specific code example that I would like to modify using CSS properties. How can I achieve this? <div id="btn-toggle-menu">Menu</div> <div id="menu-wrapper"> <ul> <li>link item</li> ...

jqueryhtmlcss

Tips for locating a file using javascript

My application scans a folder and displays all folders and HTML files inside it in a dropdown menu. It also shows any HTML files inside an iframe. There is one file named "highlighted.html" that should not appear in the dropdown menu, but if it exists in t ...

javascriptjqueryhtmliframe

Angular having issues with Bootstrap navbar dropdown functionality

I've encountered an issue with the bootstrap navbar in Angular where I can't get the dropdown menu to load. The bootstrap scripts are properly linked in the angular.json file, and I'm struggling to identify the root cause of the problem. Int ...

htmlbootstrap-5angular-bootstrap