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.

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.

• javascript
• twitter-bootstrap

2 Answers 2

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

Edit:

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.

I wrote a show more/less without using javascript, just a little CSS and html;

HTML:

<div id="descriptionContent" class="collapse descriptionText">
                <p><!--Your content--></p>
            </div>
            <a href="#descriptionContent" data-toggle="collapse" class="collapsed">
                <span class="text-danger readMore">(read more)</span>
                <span class="text-danger readLess">(read less)</span>
            </a>

CSS:

a .readMore {
    display: none;
}

a .readLess {
    display: inline;
}

a.collapsed .readMore {
    display: inline;
}

a.collapsed .readLess {
    display: none;
}

.descriptionText:not(.in) {
    min-height: 4.25em;
    height: 4.25em;
    display: block;
    overflow: hidden;
}