How to make collapsed content to be expanded on load

Issue

$(document).ready(function() {  
$(".collapse").collapse({

      open: function() {

        this.slideDown(300);

        el = this.parent().find("h3 a")[0];

        $(el).text("-").prop('title', 'Collapse');


      },

      close: function() {

        this.slideUp(300);

        el = this.parent().find("h3 a")[0];
        $(el).text("+").prop('title', 'Expand');


      },
      accordion: true,
      persist: false
    });

I have this code and on loading the page the content is collapsed, so i click on ‘+’ and it gets expanded. I want it to be expanded on load ( respectfully, the icon will be ‘-‘ and the content will be expanded, and after clicking it, it will change into ‘+’ and the content would be collapsed.

Solution

Add the following class to your object:

class="open"

It will be open by default.

Answered By – ltalhouarne

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published