Expandable Bootstrap 4 panel with collapsible preview and content overflow feature

I am currently working on implementing a bootstrap setup that includes a small text preview and an expandable panel for overflowing text. The issue is that the setup was designed for Bootstrap 3, but I need it to work with Bootstrap 4 in my project using cards. When I tried to implement it, it didn't function as expected even when using Bootstrap 3 CDNs (

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
and 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
). It simply displayed the title 'Bacon Ipsum' without any functionality.

I'm not very proficient in HTML, JS, CSS, and CDNs, so I might have made some mistakes. If there are issues with the CSS or JavaScript CDN that I'm using, please point them out. The only modification I made was changing the div id to a class. Although I've achieved similar functionalities with accordion classes before, I haven't been able to replicate this specific setup with a preview and a single expandable section for text.

In my index.html file (with style.css loaded last and JavaScript CDNs at the bottom of the body), here's what the code looks like:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="module">
        <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>
    </div>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</html>

Additionally, if it's possible to combine this setup with another one that adds ellipses to the overflow text within a card (as seen in this example), that would be ideal!

UPDATE

In the updated index.html file:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="container">
      <div class="module">
        <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>
    </div>
  </body>
</html>

The content in style.css has been directly copied from a jfiddle example. The HTML structure is contained within actual HTML tags, and although there isn't a card used in this case, the collapsible panel will eventually be incorporated into a card component.

The current output appears as shown in the image below:

https://i.sstatic.net/Nu4UV.png

I can see the collapsed text in the source, but it's not visible on the page. Please inform me if there is additional diagnostic information needed to resolve this issue. This setup will ultimately be rendered through a Django template.

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Answer №1

  1. Your <div> element is not valid because it has multiple class attributes: class="module" and class="container". The first class declaration will override all subsequent values, so your <div> will only have the module class.
  2. To make it more generic, you can remove the CSS targeting only <p> with 
    [aria-expanded="false"]
    .
  3. In order to reset the height when the collapsed element is showing, consider utilizing Bootstrap 4's CSS class called show and write CSS accordingly to reset the height.
  4. If you want to display ellipses for text overflow style, utilize CSS3 properties like text-overflow, overflow: hidden;, and white-space: nowrap;. Keep in mind that text-overflow works only on a single line of text, so you may need to use absolute positioning for the ... content.
  5. In the demonstration, I am displaying 2 lines of text when collapsed. To calculate the height, multiply [NUM_OF_LINES] by [LINE_HEIGHT], which is 1.5 in bootstrap. This results in a height of 3rem.

HTML

<div class="container">
    <div class="module">
        <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>
</div>

CSS

.module .collapse, .module .collapsing {
    height: 3rem;
}

.module .collapse {
    position: relative;
    display: block;
    overflow: hidden;
}

.module .collapse:before {
    content: ' ...';
    position: absolute;
    right: 0;
    bottom: 0;
}

.module .collapse.show {
    height: auto;
}

.module .collapse.show:before {
    display: none;
}

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

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

Structure

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="style.css">

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        ...

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    </body>
</html>

Demo

Fiddle: https://jsfiddle.net/davidliang2008/cu0p613v/

Answer №2

Although it may not match the exact style the requester desires, this solution could be beneficial for others.

To create a fading effect where a clickable div transitions to transparency, you can overlay it above your text with the following CSS properties:

https://i.sstatic.net/iOzhA.gif

Within the div, content will be partially visible up to the defined height in the .module .collapse CSS class.

This approach involves a parent module with relative positioning and an absolute child element with the class .read-more:

.module {
  position: relative;
}

.module .collapse,
.module .collapsing {
  height: 7rem;
}

.module .collapse {
  display: block;
  overflow: hidden;
}

.module .collapse.show {
  height: auto;
}

.read-more {
  opacity: 1;
  transition: all .3s linear;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background-image: linear-gradient(to bottom, transparent 60%, white);
}

.read-more:not(.collapsed) {
  opacity: 0;
}

/* Additional CSS code here */

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<!-- Additional script tags -->
<div class="module">
  <a class="read-more collapsed" data-toggle="collapse" href="#collapseExample" role="button"></a>
  <div class="collapse" id="collapseExample" aria-expanded="false">
    <h3>Bacon Ipsum</h3>
    <p>
      {/* Lorem ipsum content */}
    </p>
  </div>
</div>

View this implementation on CodePen: https://codepen.io/lucaskuhn/pen/OJNgdPv

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

Having trouble accessing @minimum_password_length in sign up modal using Rails, Devise, and Bootstrap?

I've set up a Bootstrap modal for Devise sign up, which can be accessed through a link on the landing page navbar. The modal is functioning correctly, allowing users to sign up. However, when I attempt to include a hint about the minimum password leng ...

ruby-on-rails-4devisehamlbootstrap-modalbootstrap-4

The drop-down box options on the web page are not visible to me, but I am able to see them in the element

Having a peculiar issue with two dropdowns on my webpage. The first dropdown works perfectly fine, but when I click on the second dropdown, the options don't show up on the webpage, even though they are visible in the element window. Both dropdowns ha ...

javascriptjqueryhtmlcssajax

Making adjustments to the Bootstrap CSS design by removing certain elements

I have inserted a styling link from Bootstrap into the header section of my page, but it is applying additional styles to my cards which I don't want. Is there a way to eliminate these unwanted styles without removing the Bootstrap CSS link? Below, y ...

htmlcsstwitter-bootstrapbootstrap-5

I am experiencing a situation where my content is overflowing but the scroll feature is

After making my website dynamic, I encountered an issue where the content overflow on the home page prevented me from scrolling to the bottom of the page. Here is a link to my website for reference: ...

htmlcssscrolloverflow

Utilizing Selenium with Java, you can hover over a button and choose to click on any of the available options

Currently, I am utilizing Selenium to automate the user interface using Java. Within the UI, there is an action button that, when hovered over by the User, displays two clickable options - Create and Edit. For ease of use, I have stored CSS locators as E ...

javacssseleniummousehover

How ASP.net can dynamically generate URLs in external CSS files

I have been trying to organize my css separately from the *.aspx file. Everything was working fine when the following code was included in the aspx file: background-image: url('<%=Page.ResolveUrl("~/Themes/Red/Images/Contestant/1.jpg)%>';) ...

asp.netcss

Unusual behavior observed with Chrome image resizing

I've encountered an odd issue with Chrome related to image resizing when the window size changes. When I have Chrome snapped fullscreen in Windows (double-clicking to snap), and then unsnap the window, the images are not scaling correctly back to the ...

cssinternet-explorergoogle-chrome

What is the best way to develop an expanding line animation from this starting point?

I have a vision for an animation where, upon hovering over an icon, it enlarges, increases in opacity, and reveals some accompanying text. The visual effect I am aiming for involves two lines of color expanding horizontally from the center outwards before ...

htmlcssanimationcss-animations

Ways to emphasize the current tab on the site's navigation bar?

Here's my question: I have a menu with different items, and I want to make sure that the active tab is highlighted when users switch to another page. I noticed that Stack Overflow uses the following CSS: .nav { float: left; font-size: 1 ...

javascripthtmlcsstemplatessmarty

Switching between div elements in ReactJS

I am currently working on a web application built with ReactJS. One feature that I would like to include is similar to the following: https://i.sstatic.net/At1Gw.gif My query is as follows: What is this specific effect called? How can I go about imple ...

cssreactjs

What is the correct way to implement overflow-y: auto for vertical flex-items?

Check out this interactive example. Here is the HTML code: <div class="overflow"> <div class="block"> <div class="header"> This is a green header </div> <div class="content&q ...

htmlcssflexbox

What methods can be used to stop word-wrap in a table cell and expand the table's width?

My current scenario involves creating a mobile-friendly table using HTML. I need to apply CSS in order to: Ensure that all cells (td) do not break words, but only break at white spaces. Using white-space: nowrap; is not an acceptable solution. Make a ...

htmlcsshtml-table

Navigate through the list of options by scrolling and selecting each one until the desired element is

Hey, I've got this AngularJs directive that selects an item based on the "key-pressed" event, and it's working perfectly. The issue arises when there is a scroll bar since the elements get hidden, making it difficult for me to see them. You can ...

javascripthtmlcssangularjs

Ways to correctly import various CSS files for individual routes in a Vuejs application

Currently, I am in the process of developing a project using Vue.js and Laravel. This project will have distinct layouts for the admin/user panel and landing page, requiring different CSS files to be loaded for each route. At the moment, I am utilizing va ...

javascriptcsslaravelvue.jslayout

Tips for Bridging the Space in a Horizontal Bootstrap Card

I'm in the process of designing a website that features a horizontal bootstrap card. I'm trying to figure out how to make the image on the left side of the card fill the full height of that section. Here's the code I'm working with: & ...

htmlcssbootstrap-4

Preventing div contents from shrinking with changing screen sizes

I am currently working on creating a portfolio website similar to this one. Check out the Website Here Typically, when the screen size is reduced to less than half of the full width, the content of a website tends to be hidden rather than shrinking. Howe ...

css

Developing a custom CSS for React using clamp and focus attributes

I'm currently working on creating an object to be used in inline style, but I'm having trouble figuring out how to correctly write `clamp` and `after`. const PhoneInputStyle = { fontSize: clamp("13px", "1.111vw", "16px"), /*this particular ...

javascripthtmlcssreactjs

Creating tick lines around a solid gauge in Highcharts is a simple process that can enhance the

I am currently working with Highcharts and have a lot of dependencies on it, so I cannot use other plugins. $(function () { var gaugeOptions = { 'chart': { 'type': 'solidgauge' }, &a ...

javascriptjqueryhtmlcsshighcharts

Sticky header in an Angular Material table

Using Angular 7 with Angular material design templates, my current result looks like this: https://i.sstatic.net/G4W78.jpg However, I am aiming for a result similar to the following - with a scrollbar under the sticky header. https://i.sstatic.net/WgjVh ...

cssangulartypescriptangular-material

Viewing at full width on mobile exceeds 100% [React]

I'm attempting to make a div cover exactly 100% of the width on mobile devices, but no more. The code I'm using is as follows: Here is my React code: <div className="max-width-100vw"> HELLO I AM A UNIQUE SENTENCE HERE??? </div> And ...

htmlcssreactjsmobile