Bootstrap collapsed div not closing when clicking a new link for another toggle

Question

I'm creating a single page design, with collapsed content, for the menu. I'm not using any bootstrap menu for this collapsed content - I'm just using the ahref's for showing the content of that ahref element.

The problem is that it keeps showing the content from the recent link i just clicked.

The live site is here

Be aware that only "Webdesign" and "Profil" is the links working at the moment.

the script I've tried to integrate looks something like this:

<script> 
$('a#home-box-blog [data-toggle=collapse]').on('click', function (e) {
$('.collapse').not($(this).data("target")).collapse('hide');
});

$('a#home-box-cultivatr [data-toggle=collapse]').on('click', function (e) {
$('.collapse').not($(this).data("target")).collapse('hide');
});
</script>

EDIT: also tried this:

$("[data-toggle^='collapse']").on('click', function (e) {
$('.collapse').not($(this).data("target")).collapse('hide');

If you could figure out what I'am doing wrong to make this happen.

Answer 1

just use this code:

<script>
$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });
</script>

you can change .nav a and .navbar-to-collapse with your desired variable or add to them more variable simply by using < , > between each variable .

more explanation:

1. .nav a is the variable that you target by your click and in this example it's a link under a nav class, you can modify it to target a link using ID not class

   $('#nav a')
   

2. .navbar-to-collapse is the value for data-target= ".navbar-to-collapse" and you can modify it to the data-target you use.

so a complete example (for illustrating ) should be like that:

<header><!-- /Navigation-Bar Container-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-to-collapse">
        <span class="sr-only">Toggle navigation</span>
        <i class="icon-menu"></i>
        </button>
    </div>

    <div class="collapse navbar-collapse navbar-to-collapse">
        <ul class="nav">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
  </div><!-- /.navbar-collapse -->
</div>
</nav>

and use the script :

<script>
$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });
</script>

hope it will help you