Javascript - Toggle class issues

Question

I would like to do dropdown menus with simple interactions. One of the dropdown should be open by default. When we click on another div it should open and old opened dropdown should close it's self automatically. I tried it doesn't work fine. Can you guys please help? I have attach my code below.

$(document).ready(function() {
  $(".nb-filter-hd a").on("click", function(e) {
    e.PreventDefault;
    var grabID = $(this).attr("href");
    $('div' + grabID).toggleClass("hide");
    $("div").not('div' + grabID).addClass("hide");
  });
});

.nb-filter-hd {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: stretch;
}

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="nb-filter row-fluid full-width">
  <div class="container-fluid">
    <ul class="nb-filter-hd">
      <li> <a href="#industries"> Industries </a> </li>
      <li> <a href="#type"> Type </a> </li>
      <li> <a href="#platforms"> Platforms </a> </li>
    </ul>
    <div class="nb-industries-list row-fluid" id="industries">
      one
    </div>
    <div class="nb-industries-list hide row-fluid" id="type">
      two
    </div>
    <div class="nb-industries-list hide row-fluid" id="platforms">
      three
    </div>
  </div>
</section>

score 3 · Answer 1 · answered Jan 11 '19 at 10:31

The problem was with the line $("div").not('div' + grabID).addClass("hide");. This code adds the hide class to every div that doesn't have a specific id. This includes the wrapper div <div class="container-fluid">.

I fixed it by adding a class to only the divs that should be toggleable. See the example below.

$(document).ready(function() {
  $(".nb-filter-hd a").on("click", function(e) {
    e.preventDefault();
    var grabID = $(this).attr("href");
    $('div.hideable' + grabID).toggleClass("hide");
    $("div.hideable").not('div.hideable' + grabID).addClass("hide");
  });
});

.nb-filter-hd {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: stretch;
}

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="nb-filter row-fluid full-width">
  <div class="container-fluid">
    <ul class="nb-filter-hd">
      <li> <a href="#industries"> Industries </a> </li>
      <li> <a href="#type"> Type </a> </li>
      <li> <a href="#platforms"> Platforms </a> </li>
    </ul>
    <div class="nb-industries-list row-fluid hideable" id="industries">
      one
    </div>
    <div class="nb-industries-list hide row-fluid hideable" id="type">
      two
    </div>
    <div class="nb-industries-list hide row-fluid hideable" id="platforms">
      three
    </div>
  </div>
</section>

You could also use the `nb-industries-list` class instead of adding a new one. Nontheless +1. — Ivar, Jan 11 '19 at 10:33
@Ivar that's true, and I approve of that aswell. It's more when I create an answer I try to omit using existing code for different things just in case they have the same code elsewhere which breaks some stuff. In this case OP might have another div with the `nb-industries-list` class which shouldn't be toggled. — T. Dirks, Jan 11 '19 at 10:40
@Bst_coder No problem, if this worked out you can mark the answer as selected. For the animation part, it might be usefull to look at [this question](https://stackoverflow.com/questions/3331353/transitions-on-the-display-property) — T. Dirks, Jan 11 '19 at 10:48

Jeremy Thille · Accepted Answer · 2019-01-11T10:53:28.547

First, replace e.PreventDefault with e.preventDefault() (wrong name, and it's a method, so you need to call it.

Then, for some reason $('div' + grabID) throws an error in the console, but $(grabID) works :

$(document).ready(function() {
  $(".nb-filter-hd a").on("click", function(e) {
    e.preventDefault();
    var grabID = $(this).attr("href");
    $(grabID).toggleClass("hide");
    $(".nb-industries-list").not(grabID).addClass("hide");
  });
});

.nb-filter-hd {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: stretch;
}

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="nb-filter row-fluid full-width">
  <div class="container-fluid">
    <ul class="nb-filter-hd">
      <li> <a href="#industries"> Industries </a> </li>
      <li> <a href="#type"> Type </a> </li>
      <li> <a href="#platforms"> Platforms </a> </li>
    </ul>
    <div class="nb-industries-list row-fluid" id="industries">
      one
    </div>
    <div class="nb-industries-list hide row-fluid" id="type">
      two
    </div>
    <div class="nb-industries-list hide row-fluid" id="platforms">
      three
    </div>
  </div>
</section>

Javascript - Toggle class issues

2 Answers2