Use jquery inside or outside document ready
<p>Below two scenario give me the same behavior. But What is the difference technically? (I put the below code in the last section of script tags in the body.)</p>

<pre><code>$(document).ready(function() {
  $('.collapse').collapse({toggle: false});

  $(document).on('click', '#expandAllLessons', function() {
    $('div.accordion-body').collapse('show');
  });

  $(document).on('click', '#collapseAllLessons', function() {
    $('div.accordion-body.collapse').collapse('hide');
  });
});
</code></pre>

<p>or</p>

<pre><code>$(document).ready(function() {
  $('.collapse').collapse({toggle: false});
});

$(document).on('click', '#expandAllLessons', function() {
  $('div.accordion-body').collapse('show');
});
$(document).on('click', '#collapseAllLessons', function() {
  $('div.accordion-body.collapse').collapse('hide');
});
</code></pre>

<p>Thanks.</p>
