Toggle haml accordion

Question

I have an accordion from an image that says "Tell Me More" that shows a list when clicked. Right now the accordion is automatically set to show the full list and then when clicked collapses the accordion. I want it to do the opposite- to have the list initially collapsed. Any ideas on how to do this?

.row.featurette#feature3
  .accordion#accordion
    .accordion-group
      .accordion-heading
        %a.accordion-toggle{'data-toggle' => 'collapse', 'data-parent' => "#accordion", 'href' => '#collapse1'}
          .col-sm-2.col-sm-offset-5.text-center
          =image_tag "tell_me_more.jpg", class: "img-responsive"
      .accordion-body.collapse.in#collapse1
        .accordion-inner
          .col-sm-10.col-sm-offset-1   
            .col-sm-10.col-sm-offset-1.methods.text-center
              %dl 
                %h5
                  %span 1.
                %dt Sample Text

Answer 1

You can use hide method to hide it.

$('.collapse').hide();

And use toggle method to reveal or hide on click.

$('.accordion-toggle').on('click', function() {
  $('.collapse').toggle();
});