Creating a Foldable Footer Inside a Card (Bootstrap)

I successfully created three blocks using the CARD class in bootstrap. Now, I am seeking to add a footer or a div to each card that allows for toggling "Show/Hide Details".

Despite attempting 10 different methods, the cards keep breaking for some reason whenever I try to implement the collapsing feature.

The ultimate objective is to have the last 3 lines within each card collapse when clicking on "Show payment schedule", which should then change to "Hide payment schedule".

If you know how to achieve this functionality without disrupting the structure of the card layout, please guide me on where to properly insert the div class for the collapsing element.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<!-- Wrapper for Cards -->
<div class="row mx-n2">
...
</div>
<!-- End Wrapper for Cards -->

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

htmlcsstwitter-bootstrapbootstrap-4flexbox

Answer №1

Interested in this approach? To learn more, check out https://getbootstrap.com/docs/4.4/components/collapse/

Explanation

I made the following modifications:

data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"

to your span, turning it into a collapsible toggler. I also added a root div with 

class="collapse show" id="collapseExample"

to each of your three items so only one div can collapse at a time.

document.querySelectorAll('.change_text').forEach(cur => {
  cur.addEventListener('click', e => {
    const target = e.target;
    if (target.textContent === 'Show payment schedule') {
      target.textContent = 'Hide payment schedule';
    } else {
      target.textContent = 'Show payment schedule';
    }
  })
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="row mx-n2">
  <div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
    <!-- End Card 3 -->
    <div class="card h-100 transition-3d-hover" href="#">
      <img class="card-img-top" src="../../assets/img/480x220/yearly.gif" alt="Yearly Animation">
      <div class="card-body">
        <h4>Annually</h4>
        <p class="change_text font-size-1 text-body mb-0">You will be charged once every year the amount of</p>
        <h3 class="text-center font-weight-bold text-black-50 mb-0 mt-4">USD 408</h3>
      </div>
      <hr/>
      <!-- Collapsing Footer -->
      <div class="card-footer border-0 pt-0">
        <a class="change_text font-size-1 text-black-50" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Show payment schedule</a>
        <div class="collapse show" id="collapseExample">
          <div class="row pt-2">
            <div class="col">
              <span class="today font-size-1 text-black-50" data-toggle="tooltip" data-html="true" id="today">Today</span> </div>
            <div class="col">
              <span class="font-size-1 text-black-50">USD 408</span>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2021</span>
            </div>
            <div class="col">
              <span class="font-size-1 text-black-50">USD 408</span>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2022</span>
            </div>
            <div class="col">
              <span class="font-size-1 text-black-50">USD 408</span>
            </div>
          </div>
        </div>
      </div>
      <!-- End Collapsing Footer -->
    </div>
    <!-- End Card 3 -->
  </div>
</div>

Answer №2

Seems like the collapsing section you have is just an additional card element nested within the parent card element. Bootstrap documentation mentions a Collapse element that works with data-toggle="collapse" when triggered by a link. However, in your case where the trigger is a div, you should add the class collapse.

The documentation provides examples for both scenarios. You might want to try something similar to the second one:

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</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

What is the most effective way to implement a CSS stylesheet on a particular individual element?

Just starting out in web development and I recently experimented with a CSS stylesheet on a basic HTML element. It worked great when I targeted the element by name like this: label { color: green; } However, I wondered if there was a way to apply sty ...

htmlcss

What is the best way to justify Bootstrap 5 navbar items to the right side?

How can you right-align Bootstrap 5 navbar items? In Bootstrap 4, it was ml-auto. However, this does not work for Bootstrap 5. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

htmlcssnavbarbootstrap-5text-align

Is there a way to delay rendering the html until all the content has been fully downloaded?

Whenever I visit my webpage, I notice that the content starts loading without the animation applied to it. It seems like the CSS hasn't finished downloading yet. To solve this issue, I added a preloading bar overlay to signal that the content is still ...

javascripthtmlcssajax

How Web Components interact with innerHTML within connectedCallBack

class Form extends HTMLElement { constructor() { super() } connectedCallback() { console.log(this) console.log(this.innerHTML) } } customElements.define("my-form", Form); I'm currently faci ...

javascripthtmlweb-component

What could be the reason why the toggleClass function is not being run

I've been running into a little issue with using the .toggleClass function in my code. It seems to work inconsistently, and despite reading various posts on the topic, I haven't found a solution that works for me. Could you provide some assistan ...

javascripthtmljquery

The Google Language Translator disregards the formatting

Currently, I am in the midst of developing a website with Wordpress and have successfully integrated Google Language Translator. Everything seems to be working well, except for one issue - when I translate the content, it alters the font size. Prior to tra ...

htmlcsswordpress

Is there a way to modify the color of a checkbox within MUI?

I'm currently customizing the checkbox color in Material UI while using FormIk for data submission. I aim to change the default checkbox color to red, but I'm unsure about how to achieve this. <FormGroup> <Box display=" ...

cssreactjsformsmaterial-uiformik-material-ui

How can I display the default value in a jQuery radio button when it changes?

I recently started developing and I encountered an issue with a change event function for two radio buttons that have the same name and id but different values. When I trigger the change event, the default value related content doesn't appear until a ...

phpjqueryhtml

Ways to unveil a concealed div element using JavaScript

If javascript is disabled, I want to hide a div. If javascript is enabled, however, I don't want to rely on using the <noscript> tag due to issues in Chrome and Opera. Instead, my approach is as follows: <div id="box" style="display:none"> ...

javascripthtmlcss

What is the reason behind the variation in CSS caused by spaces in HTML markup?

I've come across a particular markup structure that has caught my attention: <!-- .section markup with line breaks and indentation (normal formatted coding) --> <form id="form" name="form"> <div class="section"> <input type ...

jqueryhtmlcss

CSS/jQuery animation alignment problem

Exploring an animation using CSS transitions and jQuery has been my recent project. The concept involves presenting the user with clickable divs to load a new page. When a div is clicked, it expands to cover the entire screen and transition to the next pag ...

jqueryhtmlcsscss-animations

What modifications were implemented in Bootstrap 5 to cause controls to automatically assume their maximum size?

After upgrading NodeJs to version 16.13.0 from 14.x, one of the modules that was updated was bootstrap. This caused me to remove my Jumbotron control due to the upgrade, although I don't believe that is directly related to the issue I am experiencing. ...

javascriptcssnode.jsreactjsbootstrap-5

Troubleshooting Problems with CSS Span Placement

Challenges with Span Positioning in CSS Currently, I am encountering difficulties while working on the index.html.erb file for an example Rails website. Below is a snippet of the HTML code I am struggling with (please note that this is simply a fabricated ...

htmlcssruby-on-railscss-position

Attempting to incorporate real-time search functionality into an input field

Looking to incorporate live search functionality in a text box, with the options being fetched from the server. If an item is not available, it should be added dynamically. For example, if typing "gre" and selecting that word, it should automatically be ad ...

htmlcsstwitter-bootstrapbootstrap-modal

Designing a structure with three fieldset components

I'm currently trying to design a page layout that includes three fieldsets. My goal is to have the first one span across 100% of the width, with the other two positioned side by side below it at 50% width each. However, I am struggling to achieve thi ...

htmlcss

Tips for repositioning my sidebar using CSS and HTML

I'm a beginner in CSS and HTML and I'm struggling to make my sidebar move to the side on my website. I have divided my site into three div areas: one for the 'sidebar', one for the 'main content', and one for both called &apos ...

htmlcsssidebar

Tips for extracting information from a URL and processing it on a webpage

Looking to pull data from a website using AngularJS. My main project is to create a "shipping cart" page. The resource provided is a URL leading to a webpage with information on a specific product. I need to extract this data and integrate it into my pag ...

javascriptangularjsjsonhtml

What could be causing the data-price values of my alternative select options to not add up correctly when running this function?

ISSUE I am facing a challenge in calculating the total values of select inputs based on the radio button selected initially. Each radio button corresponds to different select inputs with their own data-price values. Once a radio button is chosen, the div ...

htmljqueryfunction

Change the height of a div after submitting a form using Django (Python)

I have a registration form with one submit button. Upon clicking submit, if there is an error, the height of the div increases by setting it to height:auto. However, when I click submit, it changes the height of the div (.continer). Strangely, after one ...

javascriptpythonhtmlcssdjango

Extract the image URL from the href attribute using Xpath

My goal is to extract all images enclosed in href attributes from the given code snippet <div class="jcarousel product-imagethumb-alt" data-jcarousel="true"> <ul> <li> <a href="https://domain/imagefull.jpg" onclick="return false;" cla ...

javascripthtmlcssxpath