Reputation: 131
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
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
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