title: Accordion doesn't work in Bootstrap 4 collapse
body: <p><a href="https://fiddle.jshell.net/8v72rtxb/" rel="noreferrer">https://fiddle.jshell.net/8v72rtxb/</a>
  <br>
  I have the following code.<br></p>
  
  <pre><code>  &lt;div class="menu-horizontal container"&gt;
      &lt;div class="row menu-container" id="menu"&gt;
        &lt;div class="col-md-3 menu-item"&gt;
          &lt;a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#studies-collapse" aria-expanded="false" aria-controls="collapseExample"&gt;
            Studies
          &lt;/a&gt;
          &lt;div class="collapse" id="studies-collapse"&gt;
            &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                Something...
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-md-3 menu-item"&gt;
          &lt;a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#research-collapse" aria-expanded="false" aria-controls="collapseExample"&gt;
            Research
          &lt;/a&gt;
          &lt;div class="collapse" id="research-collapse"&gt;
            &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                Something...
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I have no idea why data-parent doesn't work though. Expand one collapse div doesn't close the other collapse. I tried to copy the code from the example of bootstrap, but it still doesn't work.
  Also in my project, I include <code>jquery.js</code> before <code>bootstrap.min.js</code>. I have checked some other questions, they said that <code>bootstrap.min.js</code> might have been included twice. But should that be the case?
  <br>
  Thanks for reading!</p>