Read more/less jQuery accordion

Question

I'm searching for a jQuery accordion like the one that can be found on the avg website with no luck, so I'm hoping someone here can point me into the right direction. To source code or an example.

I already have the accordion working but it's the read more/close feature that is missing and that I want to use.

Answer 1

const moreText = "Read more";
const lessText = "Read less";
const moreButton = $("button.readmorebtn");

moreButton.click(function() {
  const $this = $(this);
  $this.text($this.text() == moreText ? lessText : moreText).next(".more").slideToggle("fast");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
  </p>
  <button class="readmorebtn" type="button">Read more</button>
  <p class="more" style="display:none">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod.
    Praesent commodo cursus magna, vel scelerisque nisl consectetur.
  </p>
</div>

Answer 2

Jquery UI is great, but its a lot of extra stuff just for one little accordion. If you are going to use all of the features, then go for it.

You could also just use the jQuery methods show(), hide() or toggle(). Follow the links to learn about those, I won't explain them here.

The problem with all of those is they show or hide ALL of the text, as some of the other answers here demonstrate. If you want to show a line or two (or ten) of the actual text, then display all of it by clicking a button/link, you need a little more than the canned methods. If you just want a little script to do that, or just want to understand how its done, here is my little plugin. My script animates the open and closing of the accordion similar to show()/hide(), but will show a pre-defined amount of text in the closed position.

Fiddle

Hope this helps

HTML

<div class="show-more-snippet">
//your text goes here//
</div>
<a href="#" class="show-more">More...</a>

CSS

.show-more-snippet {
    height:35px;  /*this is set to the height of the how much text you want to show based on the font size, line height, etc*/
    width:300px;
    overflow:hidden;
}

jQuery

$('.show-more').click(function() {
    if($('.show-more-snippet').css('height') != '35px'){
        $('.show-more-snippet').stop().animate({height: '35px'}, 200);
        $(this).text('More...');
    }else{
        $('.show-more-snippet').css({height:'100%'});
        var xx = $('.show-more-snippet').height();
        $('.show-more-snippet').css({height:'35px'});
        $('.show-more-snippet').stop().animate({height: xx}, 400);
        // ^^ The above is beacuse you can't animate css to 100%.  So I change it to 100%, get the value, change it back, then animate it to the value. If you don't want animation, you can ditch all of it and just leave: $('.show-more-snippet').css({height:'100%'});^^ //
        $(this).text('Less...');
    }

});