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.

Brumaire

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>

Fairman

unfortuntely, this won't work on collapse content that have a UL . See jsfiddle.net/gDvyR/120 – Mlawsky

@Mlawsky That's because 1. the selector only refers to paragraphs (p.more) and secondly because only the first matched element is toggled. Here is a fiddle that works. (use nextAlland only the class .more): jsfiddle.net/gDvyR/121 – Fairman

@Mlawsky Also, your markup is incorrect. A ul most be written outside p tags. – Fairman

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...');
    }

});

Pestalozzi

Answer 3

 $.fn.wrap = function() {
     var msg = $(this).text();
     selector = $(this).attr('id');
        if(msg.length > 60){
            $(this).html(msg.substring(0,40) + '...<span class="more_link cursor f-bold">[more]</span>');
        }
        $('.more_link').live('click',function(){
            $('#'+selector).html(msg+' <span class="less_link cursor f-bold">[less]</span>');
        });
        $('.less_link').live('click',function(){
            $('#'+selector).html(msg.substring(0,40) + '...<span class="more_link cursor f-bold">[more]</span>');
        });
};
$(document).ready(function(){
    $('#validation_message').wrap();
});

Horning

Answer 4

Jquery UI Accordion does what you want. Specifically look at the collapsible feature.

Working example: Fiddle

HTML

<div id="content">
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet,</p>
    <div class="accordion">
        <h3>Read More</h3>
        <p> nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    </div>
</div>

Jquery UI (accordion)

$( ".accordion" ).accordion({
    active: false,
    collapsible: true,
    activate: function( event, ui ) {
        ui.newHeader.text("Close");
        ui.oldHeader.text("Read More");
    },
});

Then just style it to your flavor.

CSS

#content {border-bottom: 1px solid #999; padding-bottom: .5em; }
#content .accordion { font-family: inherited; font-size: 100%; }
#content .ui-accordion .ui-accordion-header { padding: 0; }
#content .ui-accordion .ui-accordion-header-icon { display: none; }
#content .accordion .ui-state-default,
#content .accordion .ui-state-active { border: none; background: none; padding: 0; }
#content .accordion .ui-widget-content { padding: 1em 0 0 .5em; border: none; }

Using Jquery UI can be nice because they've already added things like support for up/down keys and you can easily change the animation types. You can also capture the event for activate and change the text of the header if you want.

Pyroelectric