I'm currently in the process of developing a Bootstrap4 card that consists of a title, body, and close button that can expand and collapse. I have been closely following this tutorial from Card collapse tricks!
While I appreciate the example provided in the tutorial, I would like to make a few modifications:
- Repositioning the expand icon to the left of the card header
- Including a close button on the right side of the card header
In an attempt to implement these changes, I created a jsfiddle: https://jsfiddle.net/s0ygr35L/1/
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
My implementation:
<div class="card ml-5 mr-5 mt-5">
<h5 class="card-header expandable">
<!-- Method 2 -->
<a data-toggle="collapse" href="#collapse-example" aria-expanded="true" aria-controls="collapse-example" id="heading-example" class="d-block">
<div class="row " style='margin-bottom:0;'>
<div class="col-md-1 ">
<i class="rotate fa fa-chevron-down "></i>
</div>
<div class="col">
<p>Collapsible Group Item #1</p>
</div>
<div class="col">
<i class="fa fa-close pull-right"></i>
</div>
</div>
</a>
</h5>
<div id="collapse-example" class="collapse show" aria-labelledby="heading-example">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
Example:
<div class="card ml-5 mr-5 mt-5">
<h5 class="card-header expandable">
<!-- Method 1 -->
<a data-toggle="collapse" href="#collapse-example2" aria-expanded="true" aria-controls="collapse-example" id="heading-example" class="d-block">
<i class="fa fa-chevron-down pull-right"></i>
Collapsible Group Item #1
</a>
</h5>
<div id="collapse-example2" class="collapse show" aria-labelledby="heading-example">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>In my initial attempt at creating the card, I added a column/row section for the header, but this resulted in some unwanted blank space at the bottom. You can view the issue here: https://i.sstatic.net/bFHjR.png
I attempted to adjust the styles by setting padding-bottom=0 and margin-bottom=0, but unfortunately, it did not resolve the problem. Furthermore, the close button located on the right side of the card title rotates whenever the card is expanded or collapsed due to the CSS code. Despite my efforts to specify the CSS identifier more precisely, the rotation persists.
Could someone provide assistance with the following:
- Removing the excess space at the bottom of my card title
- Preventing my close icon button from rotating unnecessarily