How to use Twitter Bootstrap Collapse to show some portion of the text and then the rest

Question

I have text that I am displaying from a database. I would like to have a portion of the text displayed on page load (up to a certain character number), and then display the rest of the text using the "collapse" function from Twitter Bootstrap. I am unsure of how to do this. This is what I have so far:

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">See More...</a>
<div id="collapseOne" class="accordion-body collapse"><span class="description_text">{{$artist->description}}</span></div>

This will display the entire text contained in the "description" field on the click of the "see more" link. What I would like to have is a portion of the text showing on page load, and then the rest displayed (and toggled) on the click of the see more button. It would also be nice to have the "see more" button change to "see less" when the full text is displayed.

Answer 1

You can run PHP inside the blade tags, so;

<a class="accordion-toggle" data-toggle="collapse" 
    data-parent="#accordion2" href="#collapseOne">
    {{ substr($artist->description,0,30).'...' }}
</a> 

The final substr parameter being the number of characters to include

To change the link text, you will need to write some jquery to catch the show.bs.collapse callback and replace the innerhtml of the link.

This Twitter bootstrap 3.0 icon change on collapse is similar but is changing an icon.