Accordion doesn't work in Bootstrap 4 collapse

Question

https://fiddle.jshell.net/8v72rtxb/
I have the following code.

  <div class="menu-horizontal container">
    <div class="row menu-container" id="menu">
      <div class="col-md-3 menu-item">
        <a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#studies-collapse" aria-expanded="false" aria-controls="collapseExample">
          Studies
        </a>
        <div class="collapse" id="studies-collapse">
          <div class="container">
            <div class="row">
              Something...
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-3 menu-item">
        <a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#research-collapse" aria-expanded="false" aria-controls="collapseExample">
          Research
        </a>
        <div class="collapse" id="research-collapse">
          <div class="container">
            <div class="row">
              Something...
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

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 jquery.js before bootstrap.min.js. I have checked some other questions, they said that bootstrap.min.js might have been included twice. But should that be the case?
Thanks for reading!

Answer 1

I figured a workaround for this. Even without using the data-parent attribute. https://fiddle.jshell.net/zyd1vL4o/

$(document).ready(function(){
    $('.collapse').on('show.bs.collapse', function (e) {
        $('.collapse').collapse("hide")
    })
})