Skip to main content
WolfShade
WolfShade
Legend
April 13, 2018
Answered

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

  • April 13, 2018
  • 1 reply
  • 793 views

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,

^ _ ^

    This topic has been closed for replies.
    Correct answer WolfShade

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

    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,

    ^ _ ^

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 13, 2018

    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— Product User & Community Expert
    WolfShade
    WolfShadeAuthor
    Legend
    April 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,

    ^ _ ^

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 13, 2018

    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— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices