Geek Answers Handbook

Twitter Bootstrap Extending Text Using Collapse Plugin

Has anyone figured out how to use the twitter bootstrap collapse plugin where some text is displayed (say, 100 characters) and you click the expand text button to show the rest of it?

Here's a JSFiddle that demonstrates the following issues that I have :

  • Hidden text is displayed in the new line. It would be preferable if the offers were not visually violated.
  • The display of the icon-plus-sign indicator does not switch (does not disappear when hidden text is displayed, and vice versa appears again).

Fully working HTML:

 <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script> <div class="" data-toggle="collapse" data-target="#div1" > <span><b>Div1:</b> This is a sentence at the end of the first 100 characters that gets truncated </span> <i class='icon-plus-sign'></i> </div> <div id="div1" class="collapse" >such that characters 101 to infinity are not shown inline with the beginning of the sentence (<b>Div1</b>).</div> <div class="" data-toggle="collapse" data-target="#div2" > <span><b>Div2:</b>This is a sentence at the end of the first 100 characters that gets truncated </span> <i class='icon-plus-sign'></i> </div> <div id="div2" class="collapse" >such that characters 101 to infinity are not shown inline with the beginning of the sentence (<b>Div2</b>).</div>
+4
source share
2 answers

I got this to work by adding the following JavaScript:

 $("div").on("hide", function() { $(this).prev("div").find("i").attr("class","icon-plus-sign"); $(this).css("display",""); $(this).css("height","5px"); }); $("div").on("show", function() { $(this).prev("div").find("i").attr("class","icon-minus-sign"); $(this).css("display","inline"); $(this).css("height","5px"); });

And the following CSS:

 div[data-toggle="collapse"] { float: left; }

An example script is here .

Sidenote

I personally would not use the Bootstrap collapse plugin for this. I would use a special plugin like JQuery Expander in combination with Bootstrap icons.

Another script shown here.

+7
source

I agree with another post that the anti-aliasing plugin is not designed for this. It’s actually quite easy to write something that does a great job of it. For example, wrapping hidden text in <span class="truncated"> :

 <p> This is the visible part <span class="truncated">this is the hidden part.</span> </p>

Then hide it, add the hide / show icon and switch the state:

 $('.truncated').hide() // Hide the text initially .after('<i class="icon-plus-sign"></i>') // Create toggle button .next().on('click', function(){ // Attach behavior $(this).toggleClass('icon-minus-sign') // Swap the icon .prev().toggle(); // Hide/show the text });

This takes precedence over the icon-minus-sign class over icon-plus-sign , but you can add a switch to it for both if it makes you feel more secure.

Demo: http://jsfiddle.net/VNdmZ/4/

+6
source

More articles:


All Articles