Home » CSS » Bootstrap » Bootstrap Expand Collapse Text Example

About Siddharth Seth

Siddharth Seth
Siddharth is a Software Development Professional with a Master’s degree in Computer Applications with around 12 years of experience. He is currently focused on Software Architecture, Windows Azure, JavaScript Frameworks, GIS and Big Data.

Bootstrap Expand Collapse Text Example

In this example we will take a look at implementing an Expand Collapse Text feature using Bootstrap Framework. Sometimes our content is large and we initially just want to show a teaser or heading and allow the user to decide whether to show the entire content. You must have seen such feature on news sites, wherein, just the headline and a teaser summary of the article is visible and in case it interests you there is a “More…” link at the bottom of the teaser.

In the example we will display a couple of collapsible texts where we will show a teaser with a link to “Toggle Content” and “More…” and once the entire content is visible we will show a “Less…” link to collapse the content again. We will use the Bootstrap class collapse to implement this feature. We will look at two approaches to it, one using just markup and the other involving some JavaScript code.

Want to be a Bootsrap Master?

Subscribe to our newsletter and download the Bootstrap Programming Cookbook right now!

In order to get you prepared for your Bootstrap development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

 

1. Tools & Technologies

We use the following tools & technologies to implement this example:

  1. Bootstrap v3.3.7
  2. JQuery v1.12.4
  3. Nodejs v6.3.0
  4. Express
  5. Visual Studio Code IDE

2. Project Structure

We start off building our example project with the following project structure. Although I have used Visual Studio Code IDE, any text editor of your choice would suffice for the purpose.

Project Layout

css
These css files from Bootstrap package reside in this folder. All the css stylesheets created by us would reside here as well.
fonts
All the font files that came with Bootstrap are located in this folder.
js
The Bootstrap JavaScript files are placed here along with the file we will create, namely, bootstrap.expand.collapse.js
index.html
The file is based on the template at Bootstrap Getting Started section. It holds the HTML markup and is our landing page. All the other files are referenced in this one and they come together in the browser and make things happen.
index.js
Our barebones web server is built using Node.js and Express module resides in this file.

3. Using the collapse Bootstrap Class

To begin with,  we add a p tag with the text “This is an example of Bootstrap Collapse CSS Class”. Next we add an a tag with href="#content1" and data-toggle="collapse" attributes followed by some “Lorem Ipsum” text wrapped in a div tag with id="content" and class="collapse" attributes within the p tag. So, the Html added so far looks like below:

<p>
    This is an example of Bootstrap Collapse CSS Class
    <a href="#content1" data-toggle="collapse">Toggle Content...</a>
    <div id="content1" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
        Quid ergo hoc loco intellegit honestum? Eaedem res maneant alio modo.<br/>
        Cur id non ita fit? Odium autem et invidiam facile vitabis.<br/>
        Aliud igitur esse censet gaudere, aliud non dolere.<br/>
    </div>
</p>

Next, we will move on to implement the same feature with some JavaScript.

4. Using a bit of JavaScript

We add the following Html Markup for this and it looks like below:

<p>
    This is an example of Bootstrap Collapse CSS Class with a bit of JavaScript
    <a id="trigger" href="#content2" data-toggle="collapse">More...</a>
    <div id="content2" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
        Quid ergo hoc loco intellegit honestum? Eaedem res maneant alio modo.<br/>
        Cur id non ita fit? Odium autem et invidiam facile vitabis.<br/>
        Aliud igitur esse censet gaudere, aliud non dolere.<br/>
    </div>
</p>

Now, we add a JavaScript file named bootstrap.expand.collapse.js under the js folder. In this file we declare a variable which acts as a flag indicating whether the text is collapsed or expanded. Next we add an event handler to change the text of the a tag from “More…” to “Less…” or vice versa based on the flag’s value. The JavaScript should look like:

bootstrap.expand.collapse.js

var trigger = document.getElementById("trigger");
var expanded = false;

trigger.addEventListener("click", function(){
    expanded = !expanded;
    if(expanded){
        trigger.innerHTML = "Less...";
    } else {
        trigger.innerHTML = "More...";
    }
    
});

To see the results of what we have implemented so far, I will show you how to run this code in the next section.

5. Run the Code

To run the application, we need to run the following two commands at the root of the project.

> npm install
> node index.js

Now, in a browser we navigate to http://localhost:8090 to see the following results:

Collapsed Text

Expanded Text

6. Download the Source Code

This was an example of Expand Collapse text using Bootstrap.

Download
You can download the full source code of this example here : Bootstrap Expand Collapse Text Example

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Want to take your WEB dev skills to the next level?

Grab our programming books for FREE!

Here are some of the eBooks you will get:

  • PHP Programming Cookbook
  • jQuery Programming Cookbook
  • Bootstrap Programming Cookbook
  • Building WEB Apps with Node.js
  • CSS Programming Cookbook
  • HTML5 Programming Cookbook
  • AngularJS Programming Cookbook