Collapse all "Read More" buttons simultaneously using Bootstrap

I am attempting to design a segment that contains multiple paragraphs that can be expanded or collapsed individually. How can I achieve this using only pure bootstrap css so that they do not all expand and collapse simultaneously?

#summary {
  font-size: 14px;
  line-height: 1.5;
}

#summary p.collapse:not(.show) {
    height: 62px !important;
    overflow: hidden;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
}

#summary p.collapsing {
    min-height: 42px !important;
}

#summary a.collapsed:after  {
    content: '+ Read More';
}

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

By following this demonstration:

Codepen

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Take a look at the code snippet below. In order to achieve the desired output, you will need to work with different IDs.

#summary {
  font-size: 14px;
  line-height: 1.5;
}

#summary p.collapse:not(.show) {
  height: 42px !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#summary p.collapsing {
  min-height: 42px !important;
}

#summary a.collapsed:after {
  content: '+ Read More';
}

#summary a:not(.collapsed):after {
  content: '- Read Less';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.js"></script>
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-4">
      <div id="summary">
        <p class="collapse" id="collapseSummary">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Suspendisse venenatis sollicitudin
          erat in gravida. Sed eget nisl tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu neque. Nam leo massa,
          fringilla eget mauris feugiat, auctor suscipit justo.
        </p>
        <a class="collapsed" data-toggle="collapse" href="#collapseSummary" aria-expanded="false" aria-controls="collapseSummary"></a>

        <p class="collapse" id="p1">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Suspendisse venenatis sollicitudin
          erat in gravida. Sed eget nisl tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu neque. Nam leo massa,
          fringilla eget mauris feugiat, auctor suscipit justo.
        </p>
        <a class="collapsed" data-toggle="collapse" href="#p1" aria-expanded="false" aria-controls="collapseSummary"></a>

        <p class="collapse" id="p2">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Suspendisse venenatis sollicitudin
          erat in gravida. Sed eget nisl tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu neque. Nam leo massa,
          fringilla eget mauris feugiat, auctor suscipit justo.
        </p>
        <a class="collapsed" data-toggle="collapse" href="#p2" aria-expanded="false" aria-controls="collapseSummary"></a>
      </div>
    </div>
  </div>

Answer №2

Make sure to assign a unique id to each section and a different link target for every link.

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-4">
      <div id="overview">
        <p class="collapse" id="sectionA">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Suspendisse venenatis sollicitudin erat in gravida. Sed eget nisl tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu neque. Nam leo massa, fringilla eget mauris feugiat, auctor suscipit justo.
        </p>
        <a class="collapsed" data-toggle="collapse" href="#sectionA" aria-expanded="false" aria-controls="sectionA"></a><br /><br />

        <p class="collapse" id="sectionB">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Suspendisse venenatis sollicitudin erat in gravida. Sed eget nisl tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu neque. Nam leo massa, fringilla eget mauris feugiat, auctor suscipit justo.
        </p>
        <a class="collapsed" data-toggle="collapse" href="#sectionB" aria-expanded="false" aria-controls="sectionB"></a>
      </div></div></div>

Answer №3

To achieve this, consider altering the IDs

Here's a suggestion:

 <div class="container">
    <div class="row justify-content-center">
        <div class="col-md-4">
            <div id="section1">
                <p class="collapse1" id="collapseSection1">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet.
                    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In
                    hac habitasse platea dictumst. Suspendisse venenatis sollicitudin erat in gravida. Sed eget nisl
                    tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis
                    massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu
                    neque. Nam leo massa, fringilla eget mauris feugiat, auctor suscipit justo.
                </p>
                <a class="collapsed1" data-toggle="collapse" href="#collapseSection1" aria-expanded="false"
                    aria-controls="collapseSummary"></a>
            </div>
        </div>

        <div class="col-md-4">
            <div id="section2">
                <p class="collapse2" id="collapseSection2">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet.
                    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In
                    hac habitasse platea dictumst. Suspendisse venenatis sollicitudin erat in gravida. Sed eget nisl
                    tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis
                    massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu
                    neque. Nam leo massa, fringilla eget mauris feugiat, auctor suscipit justo.
                </p>
                <a class="collapsed2" data-toggle="collapse" href="#collapseSection2" aria-expanded="false"
                    aria-controls="collapseSummary"></a>
            </div>
        </div>
    </div>
</div>

#section1,
#section2 {
    font-size: 14px;
    line-height: 1.5;
}

#section1 p.collapse1:not(.show),
#section2 p.collapse2:not(.show){
    height: 42px !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
}

#section1 p.collapsing1,
#section2 p.collapsing2 {
    min-height: 42px !important;
}

#section1 a.collapsed1:after,
#section2 a.collapsed2:after {
    content: '+ Read More';
}

#section1 a:not(.collapsed1):after,
#section2 a:not(.collapsed2):after{
    content: '- Read Less';
}

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

Identifying child elements in jQuery with identical IDs

Consider this HTML setup: <div id="contentRead"> ... <div id="List"></div> </div> ... <div id="contentWrite"> ... <div id="List"></div> </div> ...

javascriptjqueryhtml

Automatically populate select boxes with values from a different source using PHP

I'm in the process of setting up automatic population for 2 select boxes on a website. When a user chooses a class, the second select box automatically displays the main specialization of that class. If the user selects Tank (for example), the third ...

javascripthtml

Can an entire application built with a combination of PHP, JavaScript, and HTML be successfully converted to Angular 7?

After creating a complex application that heavily relies on JavaScript, PHP, HTML, and numerous AJAX calls, I am considering migrating the entire codebase to Angular 7. Is it feasible to achieve this transition without requiring a complete rewrite in Ang ...

javascriptphphtmlangular

Removing CSS errors from HTML files in Visual Studio Code on a Mac

Currently, I am utilizing Visual Studio Code on a Mac for writing AngularJS style HTML. Whenever I try to include an inline expression for a CSS value, I encounter an irritating red Intellisense error, as displayed in the screenshot provided below. It is w ...

cssangularjsmacosvisual-studio-codeintellisense

Show or hide text when list item is clicked

This is the rundown of services <div> <a href="#hig"><button class="tag-btn">High blood pressure Diabetes</button></a> <a href="#hih"><button class="tag-btn">High ch ...

javascripthtmljquerycss

Looking for a way to keep the mobile ad unit fixed at the bottom of the screen

I am currently working on incorporating a 320x50 mobile ad into the mobile version of my website. The goal is to have the ad fill the entire width of a mobile device. However, the issue I'm facing is that the ad appears small and does not stretch acro ...

cssmobile

Having trouble with my JSFiddle code not functioning properly in a standard web browser for a Google Authenticator

Here is the code snippet that I am having trouble with: http://jsfiddle.net/sk1hg4h3/1/. It works fine in jsfiddle, but not in a normal browser. I have included the necessary elements in the head to call all the external files. <head> <scri ...

javascriptjqueryhtmlcssjsfiddle

Code that changes every occurrence of a particular filtered selection of HREF values to a different value

When faced with the limitation in Firefox where links cannot be opened in a new tab if they have a HREF tag diverting to a function, it might be necessary to utilize a script to convert them to an actual HREF. Understanding the functionality of foo: func ...

javascripthtmlhrefgreasemonkey

The header one tag does not wrap around content when the window size is adjusted; instead, it

I have been struggling to position my page title in the center of the header image both horizontally and vertically on my portfolio pages. I managed to get the h1 title where I want it but now I need to make it larger. The issue arises when I resize the wi ...

phphtmlcssword-wrap

Utilize CSS for defining columns within a layout

How can CSS be utilized to organize elements into columns without altering the html tag order? <ul> <li class="column-2">1</li> <li class="column-1">2</li> <li class="column-1">3</li> <li class="column- ...

htmlcss

How can I show the HTML text "<ahref>" in a UITextView on iOS?

Is there a way to show HTML tags like <a> in a textview? As an example, here is some code: Hello good morning <a href=\"1\">USER1</a> and <a href=\"13\">USER2</a> ...

htmliosattributestextview

How can I eliminate the gap above the footer in iframes alignment?

I have a setup with four iframes: header, menuframe, bodyframe, and footer. The menuframe and bodyframe are positioned next to each other with space between the footer and the menuframe/bodyframe. How can I remove this space? Here is the CSS: iframe{ ...

cssiframe

Encountering difficulty selecting a dropdown option within a group of multiple options due to an issue where the element

I am experiencing an issue when trying to select a dropdown from a group of multiple elements, as one specific dropdown cannot be selected. The error message I receive is: => {"message":"unknown error: Element ... is not clickable at point (433, 15). Ot ...

javahtmlseleniumxpath

What is the best way to store and retrieve data from the current webpage using HTML, CSS, and JavaScript?

Is there a way to persistently save the button created by the user even when the browser is refreshed? Here is an example code snippet: function create(){ const a = document.createElement("button") document.body.appendChild(a) const b = documen ...

javascripthtml

Ensuring Date Data Integrity with HTML5 Validations

I need to set up validation for a mobile website that includes two input fields. The first field should validate that the value is not later than today's date, while the second field should validate that it is not later than one year in advance of the ...

javascriptregexhtml

Is it possible to validate only the fields that are currently visible using HTML form validation

I need a solution for excluding hidden fields from HTML form validation. My situation involves having two groups of form fields, each with some required attributes. Depending on user selection, one group may be hidden, and those fields should not contribut ...

javascripthtmljqueryvalidationtwitter-bootstrap-3

Viewing saved information prior to saving - JavaScript

I'm looking for a solution to allow users to preview captured records before they are inserted. Any suggestions on how to achieve this? HTML.html <form id="view" method="POST" class="formular"> <label>Name</label> ...

javascripthtmlphonegap

Trouble with Bootstrap Collapse feature not collapsing on its own

I recently added a Bootstrap collapse feature to my payment view in Laravel. The Bootstrap section collapses when clicked, but I would like it to be collapsed by default. I understand that I need to include: aria-expanded="false" However, it still doesn& ...

javascriptjquerytwitter-bootstraplaravel

Is there a way to modify the hover border effect of a TextField in material-ui?

In Persian language, the text direction is set to rtl. I am looking for a way to adjust this input field to suit my language for the project. Please refer to the following image: Image Link I want to achieve something similar, but I am unsure how to ch ...

cssreactjsflexboxmaterial-uicss-selectors

Perform different actions based on the state of a Vue JS checkbox: "Do This" when checked and

Attempting to create a checkbox that triggers one function when initially checked, and another when it is unchecked. I have tried the following approach. There is also a variable that has been read out and reflects the current status: <input type=" ...

htmlvue.jscheckbox