CODEWITHSUNDEEP
javascript
Bst_coder
Bst_coder

Reputation: 131

Javascript - Toggle class issues

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>

Upvotes: 0

Views: 140

Answers (2)

Jeremy Thille
Jeremy Thille

Reputation: 26420

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>

Upvotes: 0

T. Dirks
T. Dirks

Reputation: 3676

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>

Upvotes: 3

Related Questions