Highlighted

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

LEGEND ,
Apr 13, 2018

Copy link to clipboard

Copied

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,

^ _ ^

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('+');

          });

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

V/r,

^ _ ^

Views

347

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

LEGEND ,
Apr 13, 2018

Copy link to clipboard

Copied

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,

^ _ ^

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('+');

          });

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

V/r,

^ _ ^

Views

348

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 13, 2018 0
Adobe Community Professional ,
Apr 13, 2018

Copy link to clipboard

Copied

Add Font Awesome icon library to the head of your document 

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 0
LEGEND ,
Apr 13, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 0
Adobe Community Professional ,
Apr 13, 2018

Copy link to clipboard

Copied

It works for me. 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

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

<div class="container">

<div id="accordion">

<div class="card">

<div class="card-header" id="headingOne">

<h5 class="mb-0">

<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 id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">

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

<div class="card">

<div class="card-header" id="headingTwo">

<h5 class="mb-0">

<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 id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">

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

<div class="card">

<div class="card-header" id="headingThree">

<h5 class="mb-0">

<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 id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">

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

</div>

</div>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Popper JS-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<!--latest Bootstrap 4 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 0
LEGEND ,
Apr 13, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 0
LEGEND ,
Apr 13, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 0
LEGEND ,
Apr 13, 2018

Copy link to clipboard

Copied

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

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 0
LEGEND ,
Apr 13, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 1