9

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!

5 Answers 5

7

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")
    })
})
1
  • Thank you it helped for me as well in bootstrap 4.
    – Sai Deepak
    Jul 11, 2019 at 8:07
0

Once go through this jsfiddle

And here is html code,

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Studies
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse " role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        <div id="studies-collapse">
          <div class="container">
            <div class="row">
              <div class="col-md-3">
                <a href="" class="menu-subitem">
                    Study Guides
                </a>
                <a href="" class="menu-subitem">
                    Counselling and Instructions
                </a>
                <a href="" class="menu-subitem">
                    Student Laboratory
                </a>
                <a href="" class="menu-subitem">
                    Student Exchange
                </a>
              </div>
              <div class="col-md-3">
                <a href="" class="menu-subitem">
                    Post‐graduate studies
                </a>
                <a href="" class="menu-subitem">
                    Theses
                </a>
                <a href="" class="menu-subitem">
                    Exams
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Research
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        <div  id="research-collapse">
          <div class="container">
            <div class="row">
              <div class="col-md-3">
                <a href="" class="menu-subitem">
                    Study Guides
                </a>
                <a href="" class="menu-subitem">
                    Counselling and Instructions
                </a>
                <a href="" class="menu-subitem">
                    Student Laboratory
                </a>
                <a href="" class="menu-subitem">
                    Student Exchange
                </a>
              </div>
              <div class="col-md-3">
                <a href="" class="menu-subitem">
                    Post‐graduate studies
                </a>
                <a href="" class="menu-subitem">
                    Theses
                </a>
                <a href="" class="menu-subitem">
                    Exams
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
3
  • Can downvoter comment on mistake, so that I can improve my answer, please ?
    – Rahul
    Feb 23, 2017 at 11:11
  • I didn't downvote it. I am still figuring out why my setup doesn't work. If I copied your code to my jsfiddle, it doesn't work...
    – phuwin
    Feb 23, 2017 at 11:28
  • I noticed this is because of your bootstrap js you used, I replaced it with other js and then I placed bootstrap's site example html in jsfiddle, it worked, and then I mapped your html into it.
    – Rahul
    Feb 23, 2017 at 11:29
0

Use:

<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" data-target="#studies-collapse" href="#studies-collapse" aria-expanded="false" aria-controls="studies-collapse">
                Studies
            </a>
            <div class="collapse" id="studies-collapse" data-parent="#menu">
                <div class="container">
                    <div class="row">
                        Something...
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 menu-item">
            <a data-toggle="collapse" class="collapsed" data-target="#research-collapse" href="#research-collapse" aria-expanded="false" aria-controls="research-collapse">
                Research
            </a>
            <div class="collapse" id="research-collapse" data-parent="#menu">
                <div class="container">
                    <div class="row">
                        Something...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

0
import 'bootstrap/js/dist/collapse';

Include this in your file and the collapse should work.

-1

If its not closing, then you might not be properly linking to to your bootstrap js. You shouldn't need to add anything extra. check for the following js files:

  • bootstrap.min.js
  • bootstrap.bundle.min.js

If you're creating a bootstrap theme then in the functions do this:
wp_register_script( 'write your theme name here', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ) );

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.