First time using Bootstrap! (v4) How do I...

Report · Apr 13, 2018

Hello, all,

I am using Bootstrap for the first time, and I'm sure I'll have a lot of questions over the next few weeks.

My question, for now, is: I'm using the pure CSS class method of collapsing blog text and using the title to expand the text when the user clicks on it. I've added a + to the far right side of the div the title is in. How can I make it become a − when the text is expanded, and back to a + when collapsed by the user?

V/r,

^ _ ^

Report · Apr 13, 2018

Add Font Awesome icon library to the head of your document

Use this CSS code to toggle the icons on collapse

Bootstrap 4 Collapse state with Font Awesome icon

Or use another set of icons as desired

Cheatsheet | Font Awesome

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 13, 2018

Thanks for the idea, Nancy.

Since my dev is isolated from the internet, I copied the text of the .css and pushed it to my dev environment. But this isn't working. It shows a placeholder where the icon should be. Any ideas?

V/r,

^ _ ^

Report · Apr 13, 2018

It works for me.

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

<style>

[data-toggle="collapse"] .fa:before { content: "\f139";

font-size: 4rem;}

[data-toggle="collapse"].collapsed .fa:before { content: "\f13a"; }

</style>

</head>

<body>

<p>Font Awesome Icon test <i class="fa fa-twitter fa-4x"></i></p>

<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <i class="fa" aria-hidden="true"></i> Collapsible Group Item #1 </button>

</h5>

</div>

<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>

<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <i class="fa" aria-hidden="true"></i> Collapsible Group Item #2 </button>

</h5>

</div>

<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>

<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <i class="fa" aria-hidden="true"></i> Collapsible Group Item #3 </button>

</h5>

</div>

<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>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 13, 2018

CDNs are out of reach of our DEV environment, and proscribed on any production environments. I can't use the CDN. Is there another way?

V/r,

^ _ ^

Report · Apr 13, 2018

Just download the fontawesome css and link to it locally just like any other css file you would link to

Report · Apr 13, 2018

I _did_ do that. It displays a placeholder where the icon should be.

V/r,

^ _ ^

Report · Apr 13, 2018

Found it. This is what I was looking for.

$('.titleElem').on('shown.bs.collapse',function(){
    $(this).find('span').html('&minus');
    }).on('hidden.bs.collapse',function(){
          $(this).find('span').html('&plus;');
          });

When I expand the text, the plus changes to a minus, and vice-versa.

V/r,

^ _ ^

First time using Bootstrap! (v4) How do I...

1 Correct answer