How to prevent collapsible content not to expand by default?

Question

The collapsible content expands by default. But I want to make it expand by click only. How to set up something like, expand="false" by default here?

Javascript:

<script>
       $("#expand dt a").click(function () {
       $(this).parent().siblings("dd").slideToggle(); 
       });
</script>

HTML:

<dl>
  <dt class="right">
    <a href="#">
      <img src="img/more-button.png">
      <span class="learn">&nbsp;Learn More:Areas of Practise</span>
    </a>
  </dt>

  <!--collapsible content begins-->
  <dd class="row collapse">
    test
  </dd>
  <!--collapsible content ends-->

  </dt>
</dl>

Answer 1

Just set style="display: none;" on <dd> for initial value.

If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed.

http://api.jquery.com/slidetoggle/

Answer 2

从DD中删除类“ collapse”，或将style =“ display：none”设置为DD

Answer 3

I would do it like this:

1. Hide all elements with $('dd').hide();
2. When any 'dt' item is clicked, toggle next item below 'dt'

Also have a look at this post

// Hide all dd elements to start with
    $('dd').hide();    
// When any dt element is clicked
$('dt').click(function(e){
    // All dt elements after this dt element until the next dt element
    // Will be hidden or shown depending on it's current visibility
    $(this).nextUntil('dt').toggle();
});

If you do it this way, you also won't need any CSS classes like collapse .