Hit enter after type your search item

A responsive text auto-expend plug-in by using jQuery/Bootstrap

The responsive auto-expend plug-in

As more and more users are coming from mobile or smart devices to your websites, it is becoming necessary to make your site mobile-friendly not only for SEO purpose but for even better user experience.

If your website has long paragraphs of text, it may add good experience if textual information is expanded by clicking “more” or some other related text while using mobile whereas the same information is presented in long paragraphs in bigger screens of desktop or laptops.

In this tutorial, a jQuery plug-in is used that you may deploy in WordPress or simple website where depending on the screen size the text information is presented completely or compacts in small devices. The plug-in is available to download from the Github website (credit: inaveedahmed).

A demo of using AutoExpend with Bootstrap framework

In this example, a responsive navigation bar is created by using the Bootstrap framework. This is followed by the long block of text paragraphs. In bigger desktop screen, the textual information is presented normally without the more button to expand it. If you are looking at it from the smart phone or smaller desktop screen, the paragraphs’ text will collapse. Click on “Show More” link to expand the text:

jQuery collpase text

See online demo and code

For setting up this plugin, you need to include the jQuery and plug-in’s JS files. You may either use the CDN link or host at your own:

    <script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>

<script type=”text/javascript” src=”https://rawgit.com/inaveedahmed/narround/master/ina.autoexpand.js”></script>

The Bootstrap’s files are included as demos is using its classes for the navigation bar. You do not necessarily require it.

The next step is to imitate the plug-in in the jQuery code:


 

The .content class is used in the main div containing textual information that you want to collapse / expand.

 

A demo of displaying other text than “Show more”

You may want using some other text than the default “Show More”. For example, “More information, “More info”, “More” and so on.

In order to change this text to expand or collapse the information, you need to change this in the plug-in JS file.

For that, open the “ina.autoexpand.js” file and find this text: “Show More”. Simply replace this to the one you want to display. See the following demo where I changed “Show More” to “More Info”.

jQuery auto expand show-more

See online demo and code

You can see, the markup remains the same as used in the first example. Only, the reference to the JS file of plug-in is changed in the <head> section:


 

In the JS file, I changed the following:


 

In that long code, you only need to change the “More Info” to one you want.

Changing other styles of “More” text

Similarly, you may change the style of “Show more” text as per need or to match the style of your website. For that, simply change or add the CSS properties for the “Show More” section as shown in the example below:

jQuery auto expand CSS

See online demo and code

You can see the light blue background color of “More info” content along with different borders for left and right. No markup is changed in this demo as well while JS file’s following section is modified:


 

Similarly, you may change the images for showing collapsed or expanded content.

This div height required for enabling the sticky sidebar