brunodd brunodd - 11 months ago 73
Javascript Question

Bootstrap accordion with Read more/less

I'm trying to use the Bootstrap accordion feature Read more/less on the content. I need to have at least the first paragraph shown for each accordion item.

When the item is collapsed the button should show Read more and when is expanded it should show Read less.

This is what I am getting at the moment: Bootply

As you can see the first item is expanded and the button should show Read less.

Any ideas how I could achieve this?
Thank you in advance.

Answer Source

Swap the $this.text('See Less'); and $this.text('See More'); in your JS file.


To add on to that - swapping those two in your JS file will only make it so that your first accordion button text look fine. Your second accordion is still botched up. Also, it seems as if you did copy paste the code (for the most part) from the bootstrap docs. If you click on the headings, you'll see that your buttons won't properly update, so you're going to want to look into that too. Your buttons are also only toggling the panel, as opposed to actually functioning like an accordion (i.e., opening up one panel will close the other one that was open). If the 'Show More/Less' buttons aren't really necessary, I'd just go with dumping those and sticking with clicking the headers to open different panels.