Accordion featuring content that is partially collapsed

<div class="accordion" id="uniqueAccordionExample">
  <div class="card">
    <div class="card-header" id="headingUniqueOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#uniqueCollapseOne" aria-expanded="true" aria-controls="uniqueCollapseOne">
          Unique Accordion Item #1
        </button>
      </h5>
    </div>

    <div id="uniqueCollapseOne" class="collapse show" aria-labelledby="headingUniqueOne" data-parent="#uniqueAccordionExample">
      <div class="card-body">
        Create a custom accordion with Bootstrap 4 that reveals some hidden content on load and expands fully upon button click.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingUniqueTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button"  data-toggle="collapse" data-target="#uniqueCollapseTwo" aria-expanded="false" aria-controls="uniqueCollapseTwo">
          Unique Accordion Item #2
        </button>
      </h5>
    </div>
    <div id="uniqueCollapseTwo" class="collapse" aria-labelledby="headingUniqueTwo" data-parent="#uniqueAccordionExample">
      <div class="card-body">
        Expose some of the hidden text in an accordion panel before clicking to show more. Can you help achieve this effect?
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingUniqueThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#uniqueCollapseThree" aria-expanded="false" aria-controls="uniqueCollapseThree">
          Unique Accordion Item #3
        </button>
      </h5>
    </div>
    <div id="uniqueCollapseThree" class="collapse" aria-labelledby="headingUniqueThree" data-parent="#uniqueAccordionExample">
      <div class="card-body">
        Revealing specific lines of content within an accordion section until expanded by user interaction. Seeking a solution, any suggestions?
      </div>
    </div>
  </div>
</div>

Hello everyone, I'm looking for assistance in modifying this Bootstrap 4 accordion code to have partially collapsed panels. The aim is to display some of the hidden content initially and expand the rest upon button click. Any ideas or solutions are greatly appreciated!

Answer №1

To limit the height of .card-body, you can use the max-height property. If a button within .card-body is clicked, the max-height attribute will be removed.

.card-body {
  max-height: 100px;
}

$('.card-body').on('click', '.btn', function() {
  $(this).closest('.card-body').css('max-height', 'inherit'); 
});
$('#accordionExample').on('hidden.bs.collapse', function () {
  $(this).find('.card-body').css('max-height', '');  // remove max-height when collapsed
})

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

What is the best way to create a transparent section within a div to reveal the content below?

My goal is to create a user interface that resembles the design shown in this image https://i.stack.imgur.com/GfiZ8.png One issue I'm facing is how to make the center of the top div circular and transparent, just like in the reference image. I consi ...

Unable to trigger click event following regeneration of elements

I am having trouble with a click event on checkboxes when I remove and insert new table bodies. How can I fix this issue? I have tried using append(), clone() but it didn't work for my code. To demonstrate the problem, I have created a JSFIDDLE which ...

What is the best way to attach an onClick event to a PHP-generated link?

Currently, I'm attempting to implement an onclick event on a link within a PHP file. $body2 .= '<td class="sampling-list-td download-link">' . '<a ' . 'class="sampling-list-download" ' . 'href="#" ' . ...

Catch the return of the transition event

My website is built on asp net core, with all pages displayed as partialviews to create a spa model without relying on angular or other frameworks. By switching partialviews, I can easily modify the page's url using window.history.pushState ("objec ...

Running a PHP script within an HTML file without the need to refresh the page

I need to execute a PHP File that was embedded in a div within my HTML code. The main page consists of a form and a table. The form adds rows to the MySQL table, while the table dynamically displays the content of the MySQL table. I am trying to find a way ...

Navigating an array to link values to anchor tags

I'm struggling with an array that contains image file names ["1352.jpg", "1353.jpg", "1354"]. My goal is to loop through this array and generate anchor links for each item separated by commas. I've attempted the following code snippet, but it&apo ...

Can dynamic checkboxes be utilized for filtering data in a table using Angular 7?

I need assistance with dynamically filtering data in a table using checkboxes. The aim is to allow users to toggle multiple checkboxes to refine the displayed data. Currently, I have achieved some functionality but I am struggling to determine whether or ...

Adding Data to a Database Using Ajax with PHP

I am trying to use Ajax to insert data into a database, but I keep encountering this error: Uncaught ReferenceError: insertData is not defined at HTMLInputElement.onclick (Modal.php:105) Error screenshot: https://i.sstatic.net/AmXka.jpg The HTML and ...

How come I am unable to expand a collection of objects using Zustand?

I am currently utilizing Zustand in a TypeScript Next.js application. Strangely, whenever I attempt to loop through my state object, I encounter a runtime error message. The structure of the damaged zone object for my car is as follows: const damagedZones ...

What is the best way to merge three or more Observables together?

I have obtained 3 different Observables from 3 separate Services through API calls: this.gs.getLocationName().subscribe((loc) => this.locationName = loc); this.gs.getLocationInfo(this.locationName).subscribe((data) => { this.lat = data.results.ge ...

The issue of Safari causing duplicate ajax calls to be submitted

Upon observation, it appears that Safari 5.0.5 (6533.21.1) is sending duplicate ajax calls. To illustrate this issue, I have conducted a simplified test as shown below: // jquery 1.6 include $(document).ready(function() { setTimeout(function(e) { ...

The Challenge of Cross-Origin Resource Sharing in WebAPI

I'm working on a basic webapi project with default controllers. I need to access the same values from an HTML page using an ajax request. Key Points: Retrieve the token using the token method Pass the token to get the values Client-Side: Below is ...

Can we compel Morphia to convert the ObjectId into its hexadecimal representation?

Currently, I am working on a Kotlin multi-project solution. One project defines data classes and an API to access a MongoDB where the ObjectId is automatically created. This particular project uses Morphia version 1.3.2. Entries are stored using the follow ...

What is the reason for having a space between the <body> and the <html> tags?

Can you explain why there is a gap between the top of the green box and the browser window in Chrome and Firefox? I've tried various CSS configurations to eliminate the apparent space between the html and body elements, but it seems that some padding ...

Removing margins from the footer and header after adding a video background: A step-by-step guide

After implementing a video as the background of my HTML project, I noticed some margins appearing on the right side of the header and footer. Despite following advice to set "margin: 0" in my CSS for the Body element, the issue persists. You can view the ...

Leveraging conditions to retrieve information in the desired format from MongoDb

Here is an example of what the sample documents look like { userId: 1, totalGames: 10, winStats: 4, lostStats: 6, g1Stats: { totalGames: 4, winStats: 1, lostStats: 3, }, g2Stats: { totalGames: 5, wi ...

AJAX does not execute all inline JavaScript code

I am currently using AJAX to load a fragment of a document. I have successfully loaded 'external' scripts, but I am encountering issues when trying to execute all the JavaScript within <script> tags. Below is an example of the HTML fragmen ...

Using an array of images with CSS and displaying them in HTML

Is there a way to use one class for 3 buttons, each with its own unique background image? I wanted to create an array of background images in CSS and then retrieve them individually for each button. However, after some research, it seems that CSS does not ...

Issue with ng-src

The main issue I am encountering involves using ng-src="" to dynamically add images from my JSON file. However, I have noticed that the images are not being displayed when using ng-src="" within the img element in the HTML. Upon inspecting the element, I ...

Can the tooltip on c3 charts be modified dynamically?

Creating a c3 chart involves defining various properties, including a tooltip. Here is an example: generateData = () => { const x = randomNR(0, 100); const y = randomNR(0, 100); const together = x + y; return { data: { columns: [ ...