Adding the JS/jQuery click functionality for extra elements
1
I've written 4 different click functions for every nav header element. I don't think this is an efficient way to do it. I want to know what logic I can use to get this done in 1 block itself rather than writing the 4 different blocks for 4 nav header.
//First Nav Header
$(".header-experience").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-experience").show();
$(".container-experience .sub-nav-inner-container").css("display","flex");
});
//Second Nav Header
$(".header-shop").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-shop").show();
$(".container-shop .sub-nav-inner-container").css("display","flex");
});
//Third Nav Header
$(".header-extra-label").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-extra-label").show();
$(".container-extra-label .sub-nav-inner-container").css("display","flex");
});
//Fourth Nav Header
$(".header-extra-equity").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-extra-equity").show();
$(".container-extra-equity .sub-nav-inner-container").css("display","flex");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="sidebar-sub-nav display-none wrapper">
<div class="slider"></div>
<ul class="sub-nav-category nav nav-tabs nav-justified">
<li class="nav-item active"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-shop">Shop</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-experience">Bars</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-label">Discover BrewDog</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-equity">Equity for Punks</span></a></li>
</ul>
<div class="sub-nav-container">
<!-- SHOP NAV START -->
<div class="sub-nav-inner-container container-shop carousel">
<div>
<p class="sub-nav-header"><a href="{{store url="beers"}}">Beer</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="beer/new-in.html"}}">New In</a></p>
<p><a href="{{store url="beer/headliners.html"}}">Headliners</a></p>
<p><a href="{{store url="beer/seasonal.html"}}">Seasonal</a></p>
<p><a href="{{store url="beer/year-round.html"}}">Year round</a></p>
<p><a href="{{store url="beer/high-octane.html"}}">High Octane</a></p>
<p><a href="{{store url="beer/overworks.html"}}">OverWorks</a></p>
<p><a href="{{store url="beer/abstrakt.html"}}">Abstrakt</a></p>
<p><a href="{{store url="beer/guest.html"}}">Guest</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="merch.html"}}">Merch</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="merch/clothing.html"}}">Clothing</a></p>
<p><a href="{{store url="merch/chain-gang.html"}}">Chain Gang</a></p>
<p><a href="{{store url="merch/barware-glasses.html"}}">Barware & Glasses</a></p>
<p><a href="#">Accessories</a></p>
<p><a href="{{store url="merch/sale.html"}}">Sale</a></p>
<p><a href="{{store url="merch/gifts.html"}}">Gifts</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="spirits.html">Spirits</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="gin.html"}}">Gin</a></p>
<p><a href="{{store url="vodka.html"}}">Vodka</a></p>
<p><a href="{{store url="whisky.html"}}">Whisky</a></p>
<p><a href="{{store url="mixers.html"}}">Mixers</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Subscriptions</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="bottlebox"}}">Bottle Box</a></p>
<p><a href="{{store url="fanzine"}}fanzine/">Fanzine</a></p>
<p><a href="#">Build and buy</a></p>
</div>
</div>
</div>
<!-- SHOP NAV END -->
<!-- BARS NAV START -->
<div class="sub-nav-inner-container container-experience carousel">
<div>
<p class="sub-nav-header"><a href="{{store url="bars"}}">Bars</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="bars/uk"}}">UK</a></p>
<p><a href="{{store url="bars/global"}}">International</a></p>
<p><a href="{{store url="bars/us"}}">USA</a></p>
<p><a href="{{store url="bars/coming-soon"}}">Coming Soon</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Bar Experience</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/chain-gang"}}">Chain Gang</a></p>
<p><a href="{{store url="bars/uk/dogtap"}}">Dog Tap</a></p>
<p><a href="{{store url="bars/beer-visa"}}">Beer Visa</a></p>
<p><a href="#">EFP Franchise Opportunities</a></p>
<p><a href="{{store url="bars/festive"}}">Festive</a></p>
</div>
</div>
</div>
<!-- BARS NAV END -->
<!-- DISCOVER NAV START -->
<div class="sub-nav-inner-container container-extra-label carousel">
<div>
<p class="sub-nav-header"><a href="#">About</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/brewdog-believe"}}">BrewDog Believe</a></p>
<p><a href="{{store url="about/culture/the-charter"}}">The Charter</a></p>
<p><a href="{{store url="about/culture/culture-check"}}">Culture</a></p>
<p><a href="{{store url="about/history"}}">History</a></p>
<p><a href="{{store url="about/brewdogfoundation"}}">BrewDog Foundation</a></p>
<p><a href="https://jobs.brewdog.com">Jobs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="lowdown/blog"}}">Blog</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=""}}">Brewdog News</a></p>
<p><a href="{{store url=""}}">Business for Punks</a></p>
<p><a href="{{store url=""}}">Video Blog</a></p>
<p><a href="{{store url=""}}">Beer Rocks</a></p>
<p><a href="{{store url=""}}">Brewery Updates</a></p>
<p><a href="{{store url=""}}">Caption Competition</a></p>
<p><a href="{{store url=""}}">Dog's Blogs</a></p>
<p><a href="{{store url=""}}">BrewDog Bars</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="brewery"}}">Brewery</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="brewery/ellon-brewery"}}">Beer Making Process</a></p>
<p><a href="#">Ellon</a></p>
<p><a href="{{store url="brewery/overworks-brewery"}}">OverWorks</a></p>
<p><a href="{{store url="brewery/usa-brewery"}}">Columbus</a></p>
<p><a href="{{store url="brewery/brisbane-brewery"}}">Brisbane</a></p>
<p><a href="#">DIY Dog</a></p>
<p><a href="{{store url="dog-house"}}">DogHouse</a></p>
<p><a href="#">Quality Labs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Events</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="events/collabfest"}}">Collabfest</a></p>
<p><a href="{{store url="events/metro-mayhem"}}">Metro Mayhem</a></p>
<p><a href="{{store url="events/agm2018"}}">AGM</a></p>
</div>
</div>
</div>
<!-- DISCOVER NAV END -->
<!-- EFP NAV START -->
<div class="sub-nav-inner-container container-extra-equity carousel">
<div>
<p class="sub-nav-header">Equity For Punks</p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/brewdog-believe"}}">EFP UK</a></p>
<p><a href="{{store url="about/culture/the-charter"}}">EFP USA</a></p>
<p><a href="{{store url="about/culture/culture-check"}}">EFP Australia</a></p>
<p><a href="{{store url="about/history"}}">EFP Re-Brews</a></p>
<p><a href="{{store url="about/brewdogfoundation"}}">Blue Print</a></p>
</div>
</div>
</div>
<!-- EFP NAV END -->
</div>
</div>Code is same for all 4 nav header except the first click function line and the last 2 line codes
javascript jquery
asked Nov 16 '18 at 3:23
Naveen L BhandariNaveen L Bhandari
445
add a comment |
1
I've written 4 different click functions for every nav header element. I don't think this is an efficient way to do it. I want to know what logic I can use to get this done in 1 block itself rather than writing the 4 different blocks for 4 nav header.
//First Nav Header
$(".header-experience").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-experience").show();
$(".container-experience .sub-nav-inner-container").css("display","flex");
});
//Second Nav Header
$(".header-shop").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-shop").show();
$(".container-shop .sub-nav-inner-container").css("display","flex");
});
//Third Nav Header
$(".header-extra-label").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-extra-label").show();
$(".container-extra-label .sub-nav-inner-container").css("display","flex");
});
//Fourth Nav Header
$(".header-extra-equity").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-extra-equity").show();
$(".container-extra-equity .sub-nav-inner-container").css("display","flex");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="sidebar-sub-nav display-none wrapper">
<div class="slider"></div>
<ul class="sub-nav-category nav nav-tabs nav-justified">
<li class="nav-item active"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-shop">Shop</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-experience">Bars</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-label">Discover BrewDog</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-equity">Equity for Punks</span></a></li>
</ul>
<div class="sub-nav-container">
<!-- SHOP NAV START -->
<div class="sub-nav-inner-container container-shop carousel">
<div>
<p class="sub-nav-header"><a href="{{store url="beers"}}">Beer</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="beer/new-in.html"}}">New In</a></p>
<p><a href="{{store url="beer/headliners.html"}}">Headliners</a></p>
<p><a href="{{store url="beer/seasonal.html"}}">Seasonal</a></p>
<p><a href="{{store url="beer/year-round.html"}}">Year round</a></p>
<p><a href="{{store url="beer/high-octane.html"}}">High Octane</a></p>
<p><a href="{{store url="beer/overworks.html"}}">OverWorks</a></p>
<p><a href="{{store url="beer/abstrakt.html"}}">Abstrakt</a></p>
<p><a href="{{store url="beer/guest.html"}}">Guest</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="merch.html"}}">Merch</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="merch/clothing.html"}}">Clothing</a></p>
<p><a href="{{store url="merch/chain-gang.html"}}">Chain Gang</a></p>
<p><a href="{{store url="merch/barware-glasses.html"}}">Barware & Glasses</a></p>
<p><a href="#">Accessories</a></p>
<p><a href="{{store url="merch/sale.html"}}">Sale</a></p>
<p><a href="{{store url="merch/gifts.html"}}">Gifts</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="spirits.html">Spirits</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="gin.html"}}">Gin</a></p>
<p><a href="{{store url="vodka.html"}}">Vodka</a></p>
<p><a href="{{store url="whisky.html"}}">Whisky</a></p>
<p><a href="{{store url="mixers.html"}}">Mixers</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Subscriptions</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="bottlebox"}}">Bottle Box</a></p>
<p><a href="{{store url="fanzine"}}fanzine/">Fanzine</a></p>
<p><a href="#">Build and buy</a></p>
</div>
</div>
</div>
<!-- SHOP NAV END -->
<!-- BARS NAV START -->
<div class="sub-nav-inner-container container-experience carousel">
<div>
<p class="sub-nav-header"><a href="{{store url="bars"}}">Bars</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="bars/uk"}}">UK</a></p>
<p><a href="{{store url="bars/global"}}">International</a></p>
<p><a href="{{store url="bars/us"}}">USA</a></p>
<p><a href="{{store url="bars/coming-soon"}}">Coming Soon</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Bar Experience</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/chain-gang"}}">Chain Gang</a></p>
<p><a href="{{store url="bars/uk/dogtap"}}">Dog Tap</a></p>
<p><a href="{{store url="bars/beer-visa"}}">Beer Visa</a></p>
<p><a href="#">EFP Franchise Opportunities</a></p>
<p><a href="{{store url="bars/festive"}}">Festive</a></p>
</div>
</div>
</div>
<!-- BARS NAV END -->
<!-- DISCOVER NAV START -->
<div class="sub-nav-inner-container container-extra-label carousel">
<div>
<p class="sub-nav-header"><a href="#">About</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/brewdog-believe"}}">BrewDog Believe</a></p>
<p><a href="{{store url="about/culture/the-charter"}}">The Charter</a></p>
<p><a href="{{store url="about/culture/culture-check"}}">Culture</a></p>
<p><a href="{{store url="about/history"}}">History</a></p>
<p><a href="{{store url="about/brewdogfoundation"}}">BrewDog Foundation</a></p>
<p><a href="https://jobs.brewdog.com">Jobs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="lowdown/blog"}}">Blog</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=""}}">Brewdog News</a></p>
<p><a href="{{store url=""}}">Business for Punks</a></p>
<p><a href="{{store url=""}}">Video Blog</a></p>
<p><a href="{{store url=""}}">Beer Rocks</a></p>
<p><a href="{{store url=""}}">Brewery Updates</a></p>
<p><a href="{{store url=""}}">Caption Competition</a></p>
<p><a href="{{store url=""}}">Dog's Blogs</a></p>
<p><a href="{{store url=""}}">BrewDog Bars</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="brewery"}}">Brewery</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="brewery/ellon-brewery"}}">Beer Making Process</a></p>
<p><a href="#">Ellon</a></p>
<p><a href="{{store url="brewery/overworks-brewery"}}">OverWorks</a></p>
<p><a href="{{store url="brewery/usa-brewery"}}">Columbus</a></p>
<p><a href="{{store url="brewery/brisbane-brewery"}}">Brisbane</a></p>
<p><a href="#">DIY Dog</a></p>
<p><a href="{{store url="dog-house"}}">DogHouse</a></p>
<p><a href="#">Quality Labs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Events</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="events/collabfest"}}">Collabfest</a></p>
<p><a href="{{store url="events/metro-mayhem"}}">Metro Mayhem</a></p>
<p><a href="{{store url="events/agm2018"}}">AGM</a></p>
</div>
</div>
</div>
<!-- DISCOVER NAV END -->
<!-- EFP NAV START -->
<div class="sub-nav-inner-container container-extra-equity carousel">
<div>
<p class="sub-nav-header">Equity For Punks</p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/brewdog-believe"}}">EFP UK</a></p>
<p><a href="{{store url="about/culture/the-charter"}}">EFP USA</a></p>
<p><a href="{{store url="about/culture/culture-check"}}">EFP Australia</a></p>
<p><a href="{{store url="about/history"}}">EFP Re-Brews</a></p>
<p><a href="{{store url="about/brewdogfoundation"}}">Blue Print</a></p>
</div>
</div>
</div>
<!-- EFP NAV END -->
</div>
</div>Code is same for all 4 nav header except the first click function line and the last 2 line codes
javascript jquery
asked Nov 16 '18 at 3:23
Naveen L BhandariNaveen L Bhandari
445
What you are looking for is called Event Delegation. Add your event handler to the parent element (the UL). The event will "Bubble" up to that element. You can the determine which element was clicked using theevent.targetobject property.
– Randy Casburn
Nov 16 '18 at 3:31
add a comment |
1
1
1
I've written 4 different click functions for every nav header element. I don't think this is an efficient way to do it. I want to know what logic I can use to get this done in 1 block itself rather than writing the 4 different blocks for 4 nav header.
//First Nav Header
$(".header-experience").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-experience").show();
$(".container-experience .sub-nav-inner-container").css("display","flex");
});
//Second Nav Header
$(".header-shop").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-shop").show();
$(".container-shop .sub-nav-inner-container").css("display","flex");
});
//Third Nav Header
$(".header-extra-label").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-extra-label").show();
$(".container-extra-label .sub-nav-inner-container").css("display","flex");
});
//Fourth Nav Header
$(".header-extra-equity").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-extra-equity").show();
$(".container-extra-equity .sub-nav-inner-container").css("display","flex");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="sidebar-sub-nav display-none wrapper">
<div class="slider"></div>
<ul class="sub-nav-category nav nav-tabs nav-justified">
<li class="nav-item active"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-shop">Shop</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-experience">Bars</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-label">Discover BrewDog</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-equity">Equity for Punks</span></a></li>
</ul>
<div class="sub-nav-container">
<!-- SHOP NAV START -->
<div class="sub-nav-inner-container container-shop carousel">
<div>
<p class="sub-nav-header"><a href="{{store url="beers"}}">Beer</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="beer/new-in.html"}}">New In</a></p>
<p><a href="{{store url="beer/headliners.html"}}">Headliners</a></p>
<p><a href="{{store url="beer/seasonal.html"}}">Seasonal</a></p>
<p><a href="{{store url="beer/year-round.html"}}">Year round</a></p>
<p><a href="{{store url="beer/high-octane.html"}}">High Octane</a></p>
<p><a href="{{store url="beer/overworks.html"}}">OverWorks</a></p>
<p><a href="{{store url="beer/abstrakt.html"}}">Abstrakt</a></p>
<p><a href="{{store url="beer/guest.html"}}">Guest</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="merch.html"}}">Merch</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="merch/clothing.html"}}">Clothing</a></p>
<p><a href="{{store url="merch/chain-gang.html"}}">Chain Gang</a></p>
<p><a href="{{store url="merch/barware-glasses.html"}}">Barware & Glasses</a></p>
<p><a href="#">Accessories</a></p>
<p><a href="{{store url="merch/sale.html"}}">Sale</a></p>
<p><a href="{{store url="merch/gifts.html"}}">Gifts</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="spirits.html">Spirits</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="gin.html"}}">Gin</a></p>
<p><a href="{{store url="vodka.html"}}">Vodka</a></p>
<p><a href="{{store url="whisky.html"}}">Whisky</a></p>
<p><a href="{{store url="mixers.html"}}">Mixers</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Subscriptions</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="bottlebox"}}">Bottle Box</a></p>
<p><a href="{{store url="fanzine"}}fanzine/">Fanzine</a></p>
<p><a href="#">Build and buy</a></p>
</div>
</div>
</div>
<!-- SHOP NAV END -->
<!-- BARS NAV START -->
<div class="sub-nav-inner-container container-experience carousel">
<div>
<p class="sub-nav-header"><a href="{{store url="bars"}}">Bars</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="bars/uk"}}">UK</a></p>
<p><a href="{{store url="bars/global"}}">International</a></p>
<p><a href="{{store url="bars/us"}}">USA</a></p>
<p><a href="{{store url="bars/coming-soon"}}">Coming Soon</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Bar Experience</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/chain-gang"}}">Chain Gang</a></p>
<p><a href="{{store url="bars/uk/dogtap"}}">Dog Tap</a></p>
<p><a href="{{store url="bars/beer-visa"}}">Beer Visa</a></p>
<p><a href="#">EFP Franchise Opportunities</a></p>
<p><a href="{{store url="bars/festive"}}">Festive</a></p>
</div>
</div>
</div>
<!-- BARS NAV END -->
<!-- DISCOVER NAV START -->
<div class="sub-nav-inner-container container-extra-label carousel">
<div>
<p class="sub-nav-header"><a href="#">About</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/brewdog-believe"}}">BrewDog Believe</a></p>
<p><a href="{{store url="about/culture/the-charter"}}">The Charter</a></p>
<p><a href="{{store url="about/culture/culture-check"}}">Culture</a></p>
<p><a href="{{store url="about/history"}}">History</a></p>
<p><a href="{{store url="about/brewdogfoundation"}}">BrewDog Foundation</a></p>
<p><a href="https://jobs.brewdog.com">Jobs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="lowdown/blog"}}">Blog</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=""}}">Brewdog News</a></p>
<p><a href="{{store url=""}}">Business for Punks</a></p>
<p><a href="{{store url=""}}">Video Blog</a></p>
<p><a href="{{store url=""}}">Beer Rocks</a></p>
<p><a href="{{store url=""}}">Brewery Updates</a></p>
<p><a href="{{store url=""}}">Caption Competition</a></p>
<p><a href="{{store url=""}}">Dog's Blogs</a></p>
<p><a href="{{store url=""}}">BrewDog Bars</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="brewery"}}">Brewery</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="brewery/ellon-brewery"}}">Beer Making Process</a></p>
<p><a href="#">Ellon</a></p>
<p><a href="{{store url="brewery/overworks-brewery"}}">OverWorks</a></p>
<p><a href="{{store url="brewery/usa-brewery"}}">Columbus</a></p>
<p><a href="{{store url="brewery/brisbane-brewery"}}">Brisbane</a></p>
<p><a href="#">DIY Dog</a></p>
<p><a href="{{store url="dog-house"}}">DogHouse</a></p>
<p><a href="#">Quality Labs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Events</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="events/collabfest"}}">Collabfest</a></p>
<p><a href="{{store url="events/metro-mayhem"}}">Metro Mayhem</a></p>
<p><a href="{{store url="events/agm2018"}}">AGM</a></p>
</div>
</div>
</div>
<!-- DISCOVER NAV END -->
<!-- EFP NAV START -->
<div class="sub-nav-inner-container container-extra-equity carousel">
<div>
<p class="sub-nav-header">Equity For Punks</p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/brewdog-believe"}}">EFP UK</a></p>
<p><a href="{{store url="about/culture/the-charter"}}">EFP USA</a></p>
<p><a href="{{store url="about/culture/culture-check"}}">EFP Australia</a></p>
<p><a href="{{store url="about/history"}}">EFP Re-Brews</a></p>
<p><a href="{{store url="about/brewdogfoundation"}}">Blue Print</a></p>
</div>
</div>
</div>
<!-- EFP NAV END -->
</div>
</div>Code is same for all 4 nav header except the first click function line and the last 2 line codes
javascript jquery
asked Nov 16 '18 at 3:23
Naveen L BhandariNaveen L Bhandari
445
I've written 4 different click functions for every nav header element. I don't think this is an efficient way to do it. I want to know what logic I can use to get this done in 1 block itself rather than writing the 4 different blocks for 4 nav header.
//First Nav Header
$(".header-experience").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-experience").show();
$(".container-experience .sub-nav-inner-container").css("display","flex");
});
//Second Nav Header
$(".header-shop").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-shop").show();
$(".container-shop .sub-nav-inner-container").css("display","flex");
});
//Third Nav Header
$(".header-extra-label").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-extra-label").show();
$(".container-extra-label .sub-nav-inner-container").css("display","flex");
});
//Fourth Nav Header
$(".header-extra-equity").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-extra-equity").show();
$(".container-extra-equity .sub-nav-inner-container").css("display","flex");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="sidebar-sub-nav display-none wrapper">
<div class="slider"></div>
<ul class="sub-nav-category nav nav-tabs nav-justified">
<li class="nav-item active"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-shop">Shop</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-experience">Bars</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-label">Discover BrewDog</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-equity">Equity for Punks</span></a></li>
</ul>
<div class="sub-nav-container">
<!-- SHOP NAV START -->
<div class="sub-nav-inner-container container-shop carousel">
<div>
<p class="sub-nav-header"><a href="{{store url="beers"}}">Beer</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="beer/new-in.html"}}">New In</a></p>
<p><a href="{{store url="beer/headliners.html"}}">Headliners</a></p>
<p><a href="{{store url="beer/seasonal.html"}}">Seasonal</a></p>
<p><a href="{{store url="beer/year-round.html"}}">Year round</a></p>
<p><a href="{{store url="beer/high-octane.html"}}">High Octane</a></p>
<p><a href="{{store url="beer/overworks.html"}}">OverWorks</a></p>
<p><a href="{{store url="beer/abstrakt.html"}}">Abstrakt</a></p>
<p><a href="{{store url="beer/guest.html"}}">Guest</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="merch.html"}}">Merch</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="merch/clothing.html"}}">Clothing</a></p>
<p><a href="{{store url="merch/chain-gang.html"}}">Chain Gang</a></p>
<p><a href="{{store url="merch/barware-glasses.html"}}">Barware & Glasses</a></p>
<p><a href="#">Accessories</a></p>
<p><a href="{{store url="merch/sale.html"}}">Sale</a></p>
<p><a href="{{store url="merch/gifts.html"}}">Gifts</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="spirits.html">Spirits</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="gin.html"}}">Gin</a></p>
<p><a href="{{store url="vodka.html"}}">Vodka</a></p>
<p><a href="{{store url="whisky.html"}}">Whisky</a></p>
<p><a href="{{store url="mixers.html"}}">Mixers</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Subscriptions</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="bottlebox"}}">Bottle Box</a></p>
<p><a href="{{store url="fanzine"}}fanzine/">Fanzine</a></p>
<p><a href="#">Build and buy</a></p>
</div>
</div>
</div>
<!-- SHOP NAV END -->
<!-- BARS NAV START -->
<div class="sub-nav-inner-container container-experience carousel">
<div>
<p class="sub-nav-header"><a href="{{store url="bars"}}">Bars</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="bars/uk"}}">UK</a></p>
<p><a href="{{store url="bars/global"}}">International</a></p>
<p><a href="{{store url="bars/us"}}">USA</a></p>
<p><a href="{{store url="bars/coming-soon"}}">Coming Soon</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Bar Experience</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/chain-gang"}}">Chain Gang</a></p>
<p><a href="{{store url="bars/uk/dogtap"}}">Dog Tap</a></p>
<p><a href="{{store url="bars/beer-visa"}}">Beer Visa</a></p>
<p><a href="#">EFP Franchise Opportunities</a></p>
<p><a href="{{store url="bars/festive"}}">Festive</a></p>
</div>
</div>
</div>
<!-- BARS NAV END -->
<!-- DISCOVER NAV START -->
<div class="sub-nav-inner-container container-extra-label carousel">
<div>
<p class="sub-nav-header"><a href="#">About</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/brewdog-believe"}}">BrewDog Believe</a></p>
<p><a href="{{store url="about/culture/the-charter"}}">The Charter</a></p>
<p><a href="{{store url="about/culture/culture-check"}}">Culture</a></p>
<p><a href="{{store url="about/history"}}">History</a></p>
<p><a href="{{store url="about/brewdogfoundation"}}">BrewDog Foundation</a></p>
<p><a href="https://jobs.brewdog.com">Jobs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="lowdown/blog"}}">Blog</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=""}}">Brewdog News</a></p>
<p><a href="{{store url=""}}">Business for Punks</a></p>
<p><a href="{{store url=""}}">Video Blog</a></p>
<p><a href="{{store url=""}}">Beer Rocks</a></p>
<p><a href="{{store url=""}}">Brewery Updates</a></p>
<p><a href="{{store url=""}}">Caption Competition</a></p>
<p><a href="{{store url=""}}">Dog's Blogs</a></p>
<p><a href="{{store url=""}}">BrewDog Bars</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="brewery"}}">Brewery</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="brewery/ellon-brewery"}}">Beer Making Process</a></p>
<p><a href="#">Ellon</a></p>
<p><a href="{{store url="brewery/overworks-brewery"}}">OverWorks</a></p>
<p><a href="{{store url="brewery/usa-brewery"}}">Columbus</a></p>
<p><a href="{{store url="brewery/brisbane-brewery"}}">Brisbane</a></p>
<p><a href="#">DIY Dog</a></p>
<p><a href="{{store url="dog-house"}}">DogHouse</a></p>
<p><a href="#">Quality Labs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Events</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="events/collabfest"}}">Collabfest</a></p>
<p><a href="{{store url="events/metro-mayhem"}}">Metro Mayhem</a></p>
<p><a href="{{store url="events/agm2018"}}">AGM</a></p>
</div>
</div>
</div>
<!-- DISCOVER NAV END -->
<!-- EFP NAV START -->
<div class="sub-nav-inner-container container-extra-equity carousel">
<div>
<p class="sub-nav-header">Equity For Punks</p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/brewdog-believe"}}">EFP UK</a></p>
<p><a href="{{store url="about/culture/the-charter"}}">EFP USA</a></p>
<p><a href="{{store url="about/culture/culture-check"}}">EFP Australia</a></p>
<p><a href="{{store url="about/history"}}">EFP Re-Brews</a></p>
<p><a href="{{store url="about/brewdogfoundation"}}">Blue Print</a></p>
</div>
</div>
</div>
<!-- EFP NAV END -->
</div>
</div>Code is same for all 4 nav header except the first click function line and the last 2 line codes
//First Nav Header
$(".header-experience").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-experience").show();
$(".container-experience .sub-nav-inner-container").css("display","flex");
});
//Second Nav Header
$(".header-shop").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-shop").show();
$(".container-shop .sub-nav-inner-container").css("display","flex");
});
//Third Nav Header
$(".header-extra-label").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-extra-label").show();
$(".container-extra-label .sub-nav-inner-container").css("display","flex");
});
//Fourth Nav Header
$(".header-extra-equity").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-extra-equity").show();
$(".container-extra-equity .sub-nav-inner-container").css("display","flex");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="sidebar-sub-nav display-none wrapper">
<div class="slider"></div>
<ul class="sub-nav-category nav nav-tabs nav-justified">
<li class="nav-item active"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-shop">Shop</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-experience">Bars</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-label">Discover BrewDog</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-equity">Equity for Punks</span></a></li>
</ul>
<div class="sub-nav-container">
<!-- SHOP NAV START -->
<div class="sub-nav-inner-container container-shop carousel">
<div>
<p class="sub-nav-header"><a href="{{store url="beers"}}">Beer</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="beer/new-in.html"}}">New In</a></p>
<p><a href="{{store url="beer/headliners.html"}}">Headliners</a></p>
<p><a href="{{store url="beer/seasonal.html"}}">Seasonal</a></p>
<p><a href="{{store url="beer/year-round.html"}}">Year round</a></p>
<p><a href="{{store url="beer/high-octane.html"}}">High Octane</a></p>
<p><a href="{{store url="beer/overworks.html"}}">OverWorks</a></p>
<p><a href="{{store url="beer/abstrakt.html"}}">Abstrakt</a></p>
<p><a href="{{store url="beer/guest.html"}}">Guest</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="merch.html"}}">Merch</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="merch/clothing.html"}}">Clothing</a></p>
<p><a href="{{store url="merch/chain-gang.html"}}">Chain Gang</a></p>
<p><a href="{{store url="merch/barware-glasses.html"}}">Barware & Glasses</a></p>
<p><a href="#">Accessories</a></p>
<p><a href="{{store url="merch/sale.html"}}">Sale</a></p>
<p><a href="{{store url="merch/gifts.html"}}">Gifts</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="spirits.html">Spirits</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="gin.html"}}">Gin</a></p>
<p><a href="{{store url="vodka.html"}}">Vodka</a></p>
<p><a href="{{store url="whisky.html"}}">Whisky</a></p>
<p><a href="{{store url="mixers.html"}}">Mixers</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Subscriptions</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="bottlebox"}}">Bottle Box</a></p>
<p><a href="{{store url="fanzine"}}fanzine/">Fanzine</a></p>
<p><a href="#">Build and buy</a></p>
</div>
</div>
</div>
<!-- SHOP NAV END -->
<!-- BARS NAV START -->
<div class="sub-nav-inner-container container-experience carousel">
<div>
<p class="sub-nav-header"><a href="{{store url="bars"}}">Bars</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="bars/uk"}}">UK</a></p>
<p><a href="{{store url="bars/global"}}">International</a></p>
<p><a href="{{store url="bars/us"}}">USA</a></p>
<p><a href="{{store url="bars/coming-soon"}}">Coming Soon</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Bar Experience</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/chain-gang"}}">Chain Gang</a></p>
<p><a href="{{store url="bars/uk/dogtap"}}">Dog Tap</a></p>
<p><a href="{{store url="bars/beer-visa"}}">Beer Visa</a></p>
<p><a href="#">EFP Franchise Opportunities</a></p>
<p><a href="{{store url="bars/festive"}}">Festive</a></p>
</div>
</div>
</div>
<!-- BARS NAV END -->
<!-- DISCOVER NAV START -->
<div class="sub-nav-inner-container container-extra-label carousel">
<div>
<p class="sub-nav-header"><a href="#">About</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/brewdog-believe"}}">BrewDog Believe</a></p>
<p><a href="{{store url="about/culture/the-charter"}}">The Charter</a></p>
<p><a href="{{store url="about/culture/culture-check"}}">Culture</a></p>
<p><a href="{{store url="about/history"}}">History</a></p>
<p><a href="{{store url="about/brewdogfoundation"}}">BrewDog Foundation</a></p>
<p><a href="https://jobs.brewdog.com">Jobs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="lowdown/blog"}}">Blog</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=""}}">Brewdog News</a></p>
<p><a href="{{store url=""}}">Business for Punks</a></p>
<p><a href="{{store url=""}}">Video Blog</a></p>
<p><a href="{{store url=""}}">Beer Rocks</a></p>
<p><a href="{{store url=""}}">Brewery Updates</a></p>
<p><a href="{{store url=""}}">Caption Competition</a></p>
<p><a href="{{store url=""}}">Dog's Blogs</a></p>
<p><a href="{{store url=""}}">BrewDog Bars</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="brewery"}}">Brewery</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="brewery/ellon-brewery"}}">Beer Making Process</a></p>
<p><a href="#">Ellon</a></p>
<p><a href="{{store url="brewery/overworks-brewery"}}">OverWorks</a></p>
<p><a href="{{store url="brewery/usa-brewery"}}">Columbus</a></p>
<p><a href="{{store url="brewery/brisbane-brewery"}}">Brisbane</a></p>
<p><a href="#">DIY Dog</a></p>
<p><a href="{{store url="dog-house"}}">DogHouse</a></p>
<p><a href="#">Quality Labs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Events</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="events/collabfest"}}">Collabfest</a></p>
<p><a href="{{store url="events/metro-mayhem"}}">Metro Mayhem</a></p>
<p><a href="{{store url="events/agm2018"}}">AGM</a></p>
</div>
</div>
</div>
<!-- DISCOVER NAV END -->
<!-- EFP NAV START -->
<div class="sub-nav-inner-container container-extra-equity carousel">
<div>
<p class="sub-nav-header">Equity For Punks</p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/brewdog-believe"}}">EFP UK</a></p>
<p><a href="{{store url="about/culture/the-charter"}}">EFP USA</a></p>
<p><a href="{{store url="about/culture/culture-check"}}">EFP Australia</a></p>
<p><a href="{{store url="about/history"}}">EFP Re-Brews</a></p>
<p><a href="{{store url="about/brewdogfoundation"}}">Blue Print</a></p>
</div>
</div>
</div>
<!-- EFP NAV END -->
</div>
</div>//First Nav Header
$(".header-experience").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-experience").show();
$(".container-experience .sub-nav-inner-container").css("display","flex");
});
//Second Nav Header
$(".header-shop").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-shop").show();
$(".container-shop .sub-nav-inner-container").css("display","flex");
});
//Third Nav Header
$(".header-extra-label").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-extra-label").show();
$(".container-extra-label .sub-nav-inner-container").css("display","flex");
});
//Fourth Nav Header
$(".header-extra-equity").click(function() {
$(".sub-nav-inner-container div").show();
if(($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 300,
easing: "linear"
});
}
if(($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: 200,
easing: "linear"
});
}
if(($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left","150px");
$('.sub-nav-inner-container').animate({
paddingLeft:"65px"
},{
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
$(".container-extra-equity").show();
$(".container-extra-equity .sub-nav-inner-container").css("display","flex");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="sidebar-sub-nav display-none wrapper">
<div class="slider"></div>
<ul class="sub-nav-category nav nav-tabs nav-justified">
<li class="nav-item active"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-shop">Shop</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-experience">Bars</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-label">Discover BrewDog</span> </a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-equity">Equity for Punks</span></a></li>
</ul>
<div class="sub-nav-container">
<!-- SHOP NAV START -->
<div class="sub-nav-inner-container container-shop carousel">
<div>
<p class="sub-nav-header"><a href="{{store url="beers"}}">Beer</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="beer/new-in.html"}}">New In</a></p>
<p><a href="{{store url="beer/headliners.html"}}">Headliners</a></p>
<p><a href="{{store url="beer/seasonal.html"}}">Seasonal</a></p>
<p><a href="{{store url="beer/year-round.html"}}">Year round</a></p>
<p><a href="{{store url="beer/high-octane.html"}}">High Octane</a></p>
<p><a href="{{store url="beer/overworks.html"}}">OverWorks</a></p>
<p><a href="{{store url="beer/abstrakt.html"}}">Abstrakt</a></p>
<p><a href="{{store url="beer/guest.html"}}">Guest</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="merch.html"}}">Merch</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="merch/clothing.html"}}">Clothing</a></p>
<p><a href="{{store url="merch/chain-gang.html"}}">Chain Gang</a></p>
<p><a href="{{store url="merch/barware-glasses.html"}}">Barware & Glasses</a></p>
<p><a href="#">Accessories</a></p>
<p><a href="{{store url="merch/sale.html"}}">Sale</a></p>
<p><a href="{{store url="merch/gifts.html"}}">Gifts</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="spirits.html">Spirits</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="gin.html"}}">Gin</a></p>
<p><a href="{{store url="vodka.html"}}">Vodka</a></p>
<p><a href="{{store url="whisky.html"}}">Whisky</a></p>
<p><a href="{{store url="mixers.html"}}">Mixers</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Subscriptions</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="bottlebox"}}">Bottle Box</a></p>
<p><a href="{{store url="fanzine"}}fanzine/">Fanzine</a></p>
<p><a href="#">Build and buy</a></p>
</div>
</div>
</div>
<!-- SHOP NAV END -->
<!-- BARS NAV START -->
<div class="sub-nav-inner-container container-experience carousel">
<div>
<p class="sub-nav-header"><a href="{{store url="bars"}}">Bars</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="bars/uk"}}">UK</a></p>
<p><a href="{{store url="bars/global"}}">International</a></p>
<p><a href="{{store url="bars/us"}}">USA</a></p>
<p><a href="{{store url="bars/coming-soon"}}">Coming Soon</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Bar Experience</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/chain-gang"}}">Chain Gang</a></p>
<p><a href="{{store url="bars/uk/dogtap"}}">Dog Tap</a></p>
<p><a href="{{store url="bars/beer-visa"}}">Beer Visa</a></p>
<p><a href="#">EFP Franchise Opportunities</a></p>
<p><a href="{{store url="bars/festive"}}">Festive</a></p>
</div>
</div>
</div>
<!-- BARS NAV END -->
<!-- DISCOVER NAV START -->
<div class="sub-nav-inner-container container-extra-label carousel">
<div>
<p class="sub-nav-header"><a href="#">About</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/brewdog-believe"}}">BrewDog Believe</a></p>
<p><a href="{{store url="about/culture/the-charter"}}">The Charter</a></p>
<p><a href="{{store url="about/culture/culture-check"}}">Culture</a></p>
<p><a href="{{store url="about/history"}}">History</a></p>
<p><a href="{{store url="about/brewdogfoundation"}}">BrewDog Foundation</a></p>
<p><a href="https://jobs.brewdog.com">Jobs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="lowdown/blog"}}">Blog</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=""}}">Brewdog News</a></p>
<p><a href="{{store url=""}}">Business for Punks</a></p>
<p><a href="{{store url=""}}">Video Blog</a></p>
<p><a href="{{store url=""}}">Beer Rocks</a></p>
<p><a href="{{store url=""}}">Brewery Updates</a></p>
<p><a href="{{store url=""}}">Caption Competition</a></p>
<p><a href="{{store url=""}}">Dog's Blogs</a></p>
<p><a href="{{store url=""}}">BrewDog Bars</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url="brewery"}}">Brewery</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="brewery/ellon-brewery"}}">Beer Making Process</a></p>
<p><a href="#">Ellon</a></p>
<p><a href="{{store url="brewery/overworks-brewery"}}">OverWorks</a></p>
<p><a href="{{store url="brewery/usa-brewery"}}">Columbus</a></p>
<p><a href="{{store url="brewery/brisbane-brewery"}}">Brisbane</a></p>
<p><a href="#">DIY Dog</a></p>
<p><a href="{{store url="dog-house"}}">DogHouse</a></p>
<p><a href="#">Quality Labs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Events</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url="events/collabfest"}}">Collabfest</a></p>
<p><a href="{{store url="events/metro-mayhem"}}">Metro Mayhem</a></p>
<p><a href="{{store url="events/agm2018"}}">AGM</a></p>
</div>
</div>
</div>
<!-- DISCOVER NAV END -->
<!-- EFP NAV START -->
<div class="sub-nav-inner-container container-extra-equity carousel">
<div>
<p class="sub-nav-header">Equity For Punks</p>
<div class="sub-nav-contents">
<p><a href="{{store url="lowdown/brewdog-believe"}}">EFP UK</a></p>
<p><a href="{{store url="about/culture/the-charter"}}">EFP USA</a></p>
<p><a href="{{store url="about/culture/culture-check"}}">EFP Australia</a></p>
<p><a href="{{store url="about/history"}}">EFP Re-Brews</a></p>
<p><a href="{{store url="about/brewdogfoundation"}}">Blue Print</a></p>
</div>
</div>
</div>
<!-- EFP NAV END -->
</div>
</div>javascript jquery
javascript jquery
asked Nov 16 '18 at 3:23
Naveen L BhandariNaveen L Bhandari
445
asked Nov 16 '18 at 3:23
Naveen L BhandariNaveen L Bhandari
445
asked Nov 16 '18 at 3:23
Naveen L BhandariNaveen L Bhandari
445
asked Nov 16 '18 at 3:23
Naveen L BhandariNaveen L Bhandari
445
asked Nov 16 '18 at 3:23
Naveen L BhandariNaveen L Bhandari
445
445
What you are looking for is called Event Delegation. Add your event handler to the parent element (the UL). The event will "Bubble" up to that element. You can the determine which element was clicked using theevent.targetobject property.
– Randy Casburn
Nov 16 '18 at 3:31
add a comment |
What you are looking for is called Event Delegation. Add your event handler to the parent element (the UL). The event will "Bubble" up to that element. You can the determine which element was clicked using theevent.targetobject property.
– Randy Casburn
Nov 16 '18 at 3:31
What you are looking for is called Event Delegation. Add your event handler to the parent element (the UL). The event will "Bubble" up to that element. You can the determine which element was clicked using the
event.target object property.– Randy Casburn
Nov 16 '18 at 3:31
What you are looking for is called Event Delegation. Add your event handler to the parent element (the UL). The event will "Bubble" up to that element. You can the determine which element was clicked using the
event.target object property.– Randy Casburn
Nov 16 '18 at 3:31
add a comment |
3 Answers
3
active
oldest
votes
1
Change first line to $(".nav-header").click(function() {.
For last two lines. Replace it with following snippet. I've fetched index of clicked header and displayed .sub-nav-inner-container of same index.
var index = $(".nav-header").index(this);
$(".sub-nav-inner-container:nth(" + index + ")").show();
$(".sub-nav-inner-container:nth(" + index + ")").find(".sub-nav-inner-container").css("display", "flex");
// All Nav Header
$(".nav-header").click(function() {
$(".sub-nav-inner-container div").show();
if (($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left", "-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left: "0"
}, {
duration: 300,
easing: "linear"
});
}
if (($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left", "50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left: "0"
}, {
duration: 200,
easing: "linear"
});
}
if (($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left", "150px");
$('.sub-nav-inner-container').animate({
paddingLeft: "65px"
}, {
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
var index = $(".nav-header").index(this);
$(".sub-nav-inner-container:nth(" + index + ")").show();
$(".sub-nav-inner-container:nth(" + index + ")").find(".sub-nav-inner-container").css("display", "flex");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="sidebar-sub-nav display-none wrapper">
<div class="slider"></div>
<ul class="sub-nav-category nav nav-tabs nav-justified">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-shop">Shop</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-experience">Bars</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-label">Discover BrewDog</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-equity">Equity for Punks</span></a>
</li>
</ul>
<div class="sub-nav-container">
<!-- SHOP NAV START -->
<div class="sub-nav-inner-container container-shop carousel">
<div>
<p class="sub-nav-header"><a href="{{store url=" beers "}}">Beer</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" beer/new-in.html "}}">New In</a></p>
<p><a href="{{store url=" beer/headliners.html "}}">Headliners</a></p>
<p><a href="{{store url=" beer/seasonal.html "}}">Seasonal</a></p>
<p><a href="{{store url=" beer/year-round.html "}}">Year round</a></p>
<p><a href="{{store url=" beer/high-octane.html "}}">High Octane</a></p>
<p><a href="{{store url=" beer/overworks.html "}}">OverWorks</a></p>
<p><a href="{{store url=" beer/abstrakt.html "}}">Abstrakt</a></p>
<p><a href="{{store url=" beer/guest.html "}}">Guest</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" merch.html "}}">Merch</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" merch/clothing.html "}}">Clothing</a></p>
<p><a href="{{store url=" merch/chain-gang.html "}}">Chain Gang</a></p>
<p><a href="{{store url=" merch/barware-glasses.html "}}">Barware & Glasses</a></p>
<p><a href="#">Accessories</a></p>
<p><a href="{{store url=" merch/sale.html "}}">Sale</a></p>
<p><a href="{{store url=" merch/gifts.html "}}">Gifts</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="spirits.html">Spirits</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" gin.html "}}">Gin</a></p>
<p><a href="{{store url=" vodka.html "}}">Vodka</a></p>
<p><a href="{{store url=" whisky.html "}}">Whisky</a></p>
<p><a href="{{store url=" mixers.html "}}">Mixers</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Subscriptions</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" bottlebox "}}">Bottle Box</a></p>
<p><a href="{{store url=" fanzine "}}fanzine/">Fanzine</a></p>
<p><a href="#">Build and buy</a></p>
</div>
</div>
</div>
<!-- SHOP NAV END -->
<!-- BARS NAV START -->
<div class="sub-nav-inner-container container-experience carousel">
<div>
<p class="sub-nav-header"><a href="{{store url=" bars "}}">Bars</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" bars/uk "}}">UK</a></p>
<p><a href="{{store url=" bars/global "}}">International</a></p>
<p><a href="{{store url=" bars/us "}}">USA</a></p>
<p><a href="{{store url=" bars/coming-soon "}}">Coming Soon</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Bar Experience</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/chain-gang "}}">Chain Gang</a></p>
<p><a href="{{store url=" bars/uk/dogtap "}}">Dog Tap</a></p>
<p><a href="{{store url=" bars/beer-visa "}}">Beer Visa</a></p>
<p><a href="#">EFP Franchise Opportunities</a></p>
<p><a href="{{store url=" bars/festive "}}">Festive</a></p>
</div>
</div>
</div>
<!-- BARS NAV END -->
<!-- DISCOVER NAV START -->
<div class="sub-nav-inner-container container-extra-label carousel">
<div>
<p class="sub-nav-header"><a href="#">About</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/brewdog-believe "}}">BrewDog Believe</a></p>
<p><a href="{{store url=" about/culture/the-charter "}}">The Charter</a></p>
<p><a href="{{store url=" about/culture/culture-check "}}">Culture</a></p>
<p><a href="{{store url=" about/history "}}">History</a></p>
<p><a href="{{store url=" about/brewdogfoundation "}}">BrewDog Foundation</a></p>
<p><a href="https://jobs.brewdog.com">Jobs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" lowdown/blog "}}">Blog</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" "}}">Brewdog News</a></p>
<p><a href="{{store url=" "}}">Business for Punks</a></p>
<p><a href="{{store url=" "}}">Video Blog</a></p>
<p><a href="{{store url=" "}}">Beer Rocks</a></p>
<p><a href="{{store url=" "}}">Brewery Updates</a></p>
<p><a href="{{store url=" "}}">Caption Competition</a></p>
<p><a href="{{store url=" "}}">Dog's Blogs</a></p>
<p><a href="{{store url=" "}}">BrewDog Bars</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" brewery "}}">Brewery</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" brewery/ellon-brewery "}}">Beer Making Process</a></p>
<p><a href="#">Ellon</a></p>
<p><a href="{{store url=" brewery/overworks-brewery "}}">OverWorks</a></p>
<p><a href="{{store url=" brewery/usa-brewery "}}">Columbus</a></p>
<p><a href="{{store url=" brewery/brisbane-brewery "}}">Brisbane</a></p>
<p><a href="#">DIY Dog</a></p>
<p><a href="{{store url=" dog-house "}}">DogHouse</a></p>
<p><a href="#">Quality Labs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Events</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" events/collabfest "}}">Collabfest</a></p>
<p><a href="{{store url=" events/metro-mayhem "}}">Metro Mayhem</a></p>
<p><a href="{{store url=" events/agm2018 "}}">AGM</a></p>
</div>
</div>
</div>
<!-- DISCOVER NAV END -->
<!-- EFP NAV START -->
<div class="sub-nav-inner-container container-extra-equity carousel">
<div>
<p class="sub-nav-header">Equity For Punks</p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/brewdog-believe "}}">EFP UK</a></p>
<p><a href="{{store url=" about/culture/the-charter "}}">EFP USA</a></p>
<p><a href="{{store url=" about/culture/culture-check "}}">EFP Australia</a></p>
<p><a href="{{store url=" about/history "}}">EFP Re-Brews</a></p>
<p><a href="{{store url=" about/brewdogfoundation "}}">Blue Print</a></p>
</div>
</div>
</div>
<!-- EFP NAV END -->
</div>
</div>answered Nov 16 '18 at 5:44
KaranKaran
3,1252424
add a comment |
1
You could use some forEach loops to generate it, like so.
function addAnimations (params) {
if(($(window).innerWidth() >= params.width)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left",`${params.left}px`);
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: params.duration,
easing: "linear"
});
}
}
function bindHeader (selector) {
var params = [
{width: 993, left: -100, duration: 300},
{width: 993, left: -50, duration: 200},
{width: 476, left: -150, duration: 200}
];
$(selector.header).click(function() {
$(".sub-nav-inner-container div").show();
params.forEach(function(param) {
addAnimations(param)
});
$(".sub-nav-inner-container").hide();
$(selector.menu).show();
$(`${selector.menu} .sub-nav-inner-container`).css("display","flex");
});
}
var selectors = [
{header: '.header-experience', menu: '.container-experience'},
{header: '.header-shop', menu: '.container-shop'},
{header: '.header-extra-label', menu: '.container-extra-label'},
{header: '.header-extra-equity', menu: '.container-extra-equity'}
]
selectors.forEach(function(selector) {
bindHeader(selector);
})
answered Nov 16 '18 at 3:34
AnonymousSBAnonymousSB
2,184221
What if in future somebody adds 1 more nav header? Then click function won't work.
– Naveen L Bhandari
Nov 16 '18 at 3:39
You'd just callbindHeader()with the selector for the new header
– AnonymousSB
Nov 16 '18 at 3:40
Not sure but I'm getting this error Unexpected token, expected { (21:35) codepen.io/naveenborn/pen/BGZZwg
– Naveen L Bhandari
Nov 16 '18 at 4:05
That's because I accidentally left an ES6 fat arrow in there, just get rid of the=>on line 21. I've updated my code example, so just copy/paste it again, because I forgot a closing)on line 23 as well.
– AnonymousSB
Nov 16 '18 at 4:07
Thanks for all your answers. But I see 1 more error Unexpected token, expected , (24:4) I don't know how that is an error
– Naveen L Bhandari
Nov 16 '18 at 4:16
|
show 5 more comments
0
You can target all your elements by using the 'comma' separator in your selector:
$(".header-experience, .header-shop, .header-extra-label, .header-extra-equity").click(function() {
Now all elements will trigger the same click eventhandler.
When it comes to the last 2 lines, that are different, simply use an if sentence:
if ($this).is(".header-experience"))
{
$(".container-experience").show();
$(".container-experience .sub-nav-inner-container").css("display","flex");
}
else if …….
answered Nov 16 '18 at 3:33
Poul BakPoul Bak
5,46831232
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330964%2fadding-the-js-jquery-click-functionality-for-extra-elements%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Change first line to $(".nav-header").click(function() {.
For last two lines. Replace it with following snippet. I've fetched index of clicked header and displayed .sub-nav-inner-container of same index.
var index = $(".nav-header").index(this);
$(".sub-nav-inner-container:nth(" + index + ")").show();
$(".sub-nav-inner-container:nth(" + index + ")").find(".sub-nav-inner-container").css("display", "flex");
// All Nav Header
$(".nav-header").click(function() {
$(".sub-nav-inner-container div").show();
if (($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left", "-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left: "0"
}, {
duration: 300,
easing: "linear"
});
}
if (($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left", "50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left: "0"
}, {
duration: 200,
easing: "linear"
});
}
if (($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left", "150px");
$('.sub-nav-inner-container').animate({
paddingLeft: "65px"
}, {
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
var index = $(".nav-header").index(this);
$(".sub-nav-inner-container:nth(" + index + ")").show();
$(".sub-nav-inner-container:nth(" + index + ")").find(".sub-nav-inner-container").css("display", "flex");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="sidebar-sub-nav display-none wrapper">
<div class="slider"></div>
<ul class="sub-nav-category nav nav-tabs nav-justified">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-shop">Shop</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-experience">Bars</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-label">Discover BrewDog</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-equity">Equity for Punks</span></a>
</li>
</ul>
<div class="sub-nav-container">
<!-- SHOP NAV START -->
<div class="sub-nav-inner-container container-shop carousel">
<div>
<p class="sub-nav-header"><a href="{{store url=" beers "}}">Beer</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" beer/new-in.html "}}">New In</a></p>
<p><a href="{{store url=" beer/headliners.html "}}">Headliners</a></p>
<p><a href="{{store url=" beer/seasonal.html "}}">Seasonal</a></p>
<p><a href="{{store url=" beer/year-round.html "}}">Year round</a></p>
<p><a href="{{store url=" beer/high-octane.html "}}">High Octane</a></p>
<p><a href="{{store url=" beer/overworks.html "}}">OverWorks</a></p>
<p><a href="{{store url=" beer/abstrakt.html "}}">Abstrakt</a></p>
<p><a href="{{store url=" beer/guest.html "}}">Guest</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" merch.html "}}">Merch</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" merch/clothing.html "}}">Clothing</a></p>
<p><a href="{{store url=" merch/chain-gang.html "}}">Chain Gang</a></p>
<p><a href="{{store url=" merch/barware-glasses.html "}}">Barware & Glasses</a></p>
<p><a href="#">Accessories</a></p>
<p><a href="{{store url=" merch/sale.html "}}">Sale</a></p>
<p><a href="{{store url=" merch/gifts.html "}}">Gifts</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="spirits.html">Spirits</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" gin.html "}}">Gin</a></p>
<p><a href="{{store url=" vodka.html "}}">Vodka</a></p>
<p><a href="{{store url=" whisky.html "}}">Whisky</a></p>
<p><a href="{{store url=" mixers.html "}}">Mixers</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Subscriptions</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" bottlebox "}}">Bottle Box</a></p>
<p><a href="{{store url=" fanzine "}}fanzine/">Fanzine</a></p>
<p><a href="#">Build and buy</a></p>
</div>
</div>
</div>
<!-- SHOP NAV END -->
<!-- BARS NAV START -->
<div class="sub-nav-inner-container container-experience carousel">
<div>
<p class="sub-nav-header"><a href="{{store url=" bars "}}">Bars</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" bars/uk "}}">UK</a></p>
<p><a href="{{store url=" bars/global "}}">International</a></p>
<p><a href="{{store url=" bars/us "}}">USA</a></p>
<p><a href="{{store url=" bars/coming-soon "}}">Coming Soon</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Bar Experience</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/chain-gang "}}">Chain Gang</a></p>
<p><a href="{{store url=" bars/uk/dogtap "}}">Dog Tap</a></p>
<p><a href="{{store url=" bars/beer-visa "}}">Beer Visa</a></p>
<p><a href="#">EFP Franchise Opportunities</a></p>
<p><a href="{{store url=" bars/festive "}}">Festive</a></p>
</div>
</div>
</div>
<!-- BARS NAV END -->
<!-- DISCOVER NAV START -->
<div class="sub-nav-inner-container container-extra-label carousel">
<div>
<p class="sub-nav-header"><a href="#">About</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/brewdog-believe "}}">BrewDog Believe</a></p>
<p><a href="{{store url=" about/culture/the-charter "}}">The Charter</a></p>
<p><a href="{{store url=" about/culture/culture-check "}}">Culture</a></p>
<p><a href="{{store url=" about/history "}}">History</a></p>
<p><a href="{{store url=" about/brewdogfoundation "}}">BrewDog Foundation</a></p>
<p><a href="https://jobs.brewdog.com">Jobs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" lowdown/blog "}}">Blog</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" "}}">Brewdog News</a></p>
<p><a href="{{store url=" "}}">Business for Punks</a></p>
<p><a href="{{store url=" "}}">Video Blog</a></p>
<p><a href="{{store url=" "}}">Beer Rocks</a></p>
<p><a href="{{store url=" "}}">Brewery Updates</a></p>
<p><a href="{{store url=" "}}">Caption Competition</a></p>
<p><a href="{{store url=" "}}">Dog's Blogs</a></p>
<p><a href="{{store url=" "}}">BrewDog Bars</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" brewery "}}">Brewery</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" brewery/ellon-brewery "}}">Beer Making Process</a></p>
<p><a href="#">Ellon</a></p>
<p><a href="{{store url=" brewery/overworks-brewery "}}">OverWorks</a></p>
<p><a href="{{store url=" brewery/usa-brewery "}}">Columbus</a></p>
<p><a href="{{store url=" brewery/brisbane-brewery "}}">Brisbane</a></p>
<p><a href="#">DIY Dog</a></p>
<p><a href="{{store url=" dog-house "}}">DogHouse</a></p>
<p><a href="#">Quality Labs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Events</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" events/collabfest "}}">Collabfest</a></p>
<p><a href="{{store url=" events/metro-mayhem "}}">Metro Mayhem</a></p>
<p><a href="{{store url=" events/agm2018 "}}">AGM</a></p>
</div>
</div>
</div>
<!-- DISCOVER NAV END -->
<!-- EFP NAV START -->
<div class="sub-nav-inner-container container-extra-equity carousel">
<div>
<p class="sub-nav-header">Equity For Punks</p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/brewdog-believe "}}">EFP UK</a></p>
<p><a href="{{store url=" about/culture/the-charter "}}">EFP USA</a></p>
<p><a href="{{store url=" about/culture/culture-check "}}">EFP Australia</a></p>
<p><a href="{{store url=" about/history "}}">EFP Re-Brews</a></p>
<p><a href="{{store url=" about/brewdogfoundation "}}">Blue Print</a></p>
</div>
</div>
</div>
<!-- EFP NAV END -->
</div>
</div>answered Nov 16 '18 at 5:44
KaranKaran
3,1252424
add a comment |
1
Change first line to $(".nav-header").click(function() {.
For last two lines. Replace it with following snippet. I've fetched index of clicked header and displayed .sub-nav-inner-container of same index.
var index = $(".nav-header").index(this);
$(".sub-nav-inner-container:nth(" + index + ")").show();
$(".sub-nav-inner-container:nth(" + index + ")").find(".sub-nav-inner-container").css("display", "flex");
// All Nav Header
$(".nav-header").click(function() {
$(".sub-nav-inner-container div").show();
if (($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left", "-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left: "0"
}, {
duration: 300,
easing: "linear"
});
}
if (($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left", "50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left: "0"
}, {
duration: 200,
easing: "linear"
});
}
if (($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left", "150px");
$('.sub-nav-inner-container').animate({
paddingLeft: "65px"
}, {
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
var index = $(".nav-header").index(this);
$(".sub-nav-inner-container:nth(" + index + ")").show();
$(".sub-nav-inner-container:nth(" + index + ")").find(".sub-nav-inner-container").css("display", "flex");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="sidebar-sub-nav display-none wrapper">
<div class="slider"></div>
<ul class="sub-nav-category nav nav-tabs nav-justified">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-shop">Shop</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-experience">Bars</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-label">Discover BrewDog</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-equity">Equity for Punks</span></a>
</li>
</ul>
<div class="sub-nav-container">
<!-- SHOP NAV START -->
<div class="sub-nav-inner-container container-shop carousel">
<div>
<p class="sub-nav-header"><a href="{{store url=" beers "}}">Beer</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" beer/new-in.html "}}">New In</a></p>
<p><a href="{{store url=" beer/headliners.html "}}">Headliners</a></p>
<p><a href="{{store url=" beer/seasonal.html "}}">Seasonal</a></p>
<p><a href="{{store url=" beer/year-round.html "}}">Year round</a></p>
<p><a href="{{store url=" beer/high-octane.html "}}">High Octane</a></p>
<p><a href="{{store url=" beer/overworks.html "}}">OverWorks</a></p>
<p><a href="{{store url=" beer/abstrakt.html "}}">Abstrakt</a></p>
<p><a href="{{store url=" beer/guest.html "}}">Guest</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" merch.html "}}">Merch</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" merch/clothing.html "}}">Clothing</a></p>
<p><a href="{{store url=" merch/chain-gang.html "}}">Chain Gang</a></p>
<p><a href="{{store url=" merch/barware-glasses.html "}}">Barware & Glasses</a></p>
<p><a href="#">Accessories</a></p>
<p><a href="{{store url=" merch/sale.html "}}">Sale</a></p>
<p><a href="{{store url=" merch/gifts.html "}}">Gifts</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="spirits.html">Spirits</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" gin.html "}}">Gin</a></p>
<p><a href="{{store url=" vodka.html "}}">Vodka</a></p>
<p><a href="{{store url=" whisky.html "}}">Whisky</a></p>
<p><a href="{{store url=" mixers.html "}}">Mixers</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Subscriptions</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" bottlebox "}}">Bottle Box</a></p>
<p><a href="{{store url=" fanzine "}}fanzine/">Fanzine</a></p>
<p><a href="#">Build and buy</a></p>
</div>
</div>
</div>
<!-- SHOP NAV END -->
<!-- BARS NAV START -->
<div class="sub-nav-inner-container container-experience carousel">
<div>
<p class="sub-nav-header"><a href="{{store url=" bars "}}">Bars</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" bars/uk "}}">UK</a></p>
<p><a href="{{store url=" bars/global "}}">International</a></p>
<p><a href="{{store url=" bars/us "}}">USA</a></p>
<p><a href="{{store url=" bars/coming-soon "}}">Coming Soon</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Bar Experience</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/chain-gang "}}">Chain Gang</a></p>
<p><a href="{{store url=" bars/uk/dogtap "}}">Dog Tap</a></p>
<p><a href="{{store url=" bars/beer-visa "}}">Beer Visa</a></p>
<p><a href="#">EFP Franchise Opportunities</a></p>
<p><a href="{{store url=" bars/festive "}}">Festive</a></p>
</div>
</div>
</div>
<!-- BARS NAV END -->
<!-- DISCOVER NAV START -->
<div class="sub-nav-inner-container container-extra-label carousel">
<div>
<p class="sub-nav-header"><a href="#">About</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/brewdog-believe "}}">BrewDog Believe</a></p>
<p><a href="{{store url=" about/culture/the-charter "}}">The Charter</a></p>
<p><a href="{{store url=" about/culture/culture-check "}}">Culture</a></p>
<p><a href="{{store url=" about/history "}}">History</a></p>
<p><a href="{{store url=" about/brewdogfoundation "}}">BrewDog Foundation</a></p>
<p><a href="https://jobs.brewdog.com">Jobs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" lowdown/blog "}}">Blog</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" "}}">Brewdog News</a></p>
<p><a href="{{store url=" "}}">Business for Punks</a></p>
<p><a href="{{store url=" "}}">Video Blog</a></p>
<p><a href="{{store url=" "}}">Beer Rocks</a></p>
<p><a href="{{store url=" "}}">Brewery Updates</a></p>
<p><a href="{{store url=" "}}">Caption Competition</a></p>
<p><a href="{{store url=" "}}">Dog's Blogs</a></p>
<p><a href="{{store url=" "}}">BrewDog Bars</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" brewery "}}">Brewery</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" brewery/ellon-brewery "}}">Beer Making Process</a></p>
<p><a href="#">Ellon</a></p>
<p><a href="{{store url=" brewery/overworks-brewery "}}">OverWorks</a></p>
<p><a href="{{store url=" brewery/usa-brewery "}}">Columbus</a></p>
<p><a href="{{store url=" brewery/brisbane-brewery "}}">Brisbane</a></p>
<p><a href="#">DIY Dog</a></p>
<p><a href="{{store url=" dog-house "}}">DogHouse</a></p>
<p><a href="#">Quality Labs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Events</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" events/collabfest "}}">Collabfest</a></p>
<p><a href="{{store url=" events/metro-mayhem "}}">Metro Mayhem</a></p>
<p><a href="{{store url=" events/agm2018 "}}">AGM</a></p>
</div>
</div>
</div>
<!-- DISCOVER NAV END -->
<!-- EFP NAV START -->
<div class="sub-nav-inner-container container-extra-equity carousel">
<div>
<p class="sub-nav-header">Equity For Punks</p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/brewdog-believe "}}">EFP UK</a></p>
<p><a href="{{store url=" about/culture/the-charter "}}">EFP USA</a></p>
<p><a href="{{store url=" about/culture/culture-check "}}">EFP Australia</a></p>
<p><a href="{{store url=" about/history "}}">EFP Re-Brews</a></p>
<p><a href="{{store url=" about/brewdogfoundation "}}">Blue Print</a></p>
</div>
</div>
</div>
<!-- EFP NAV END -->
</div>
</div>answered Nov 16 '18 at 5:44
KaranKaran
3,1252424
add a comment |
1
1
1
Change first line to $(".nav-header").click(function() {.
For last two lines. Replace it with following snippet. I've fetched index of clicked header and displayed .sub-nav-inner-container of same index.
var index = $(".nav-header").index(this);
$(".sub-nav-inner-container:nth(" + index + ")").show();
$(".sub-nav-inner-container:nth(" + index + ")").find(".sub-nav-inner-container").css("display", "flex");
// All Nav Header
$(".nav-header").click(function() {
$(".sub-nav-inner-container div").show();
if (($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left", "-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left: "0"
}, {
duration: 300,
easing: "linear"
});
}
if (($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left", "50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left: "0"
}, {
duration: 200,
easing: "linear"
});
}
if (($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left", "150px");
$('.sub-nav-inner-container').animate({
paddingLeft: "65px"
}, {
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
var index = $(".nav-header").index(this);
$(".sub-nav-inner-container:nth(" + index + ")").show();
$(".sub-nav-inner-container:nth(" + index + ")").find(".sub-nav-inner-container").css("display", "flex");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="sidebar-sub-nav display-none wrapper">
<div class="slider"></div>
<ul class="sub-nav-category nav nav-tabs nav-justified">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-shop">Shop</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-experience">Bars</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-label">Discover BrewDog</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-equity">Equity for Punks</span></a>
</li>
</ul>
<div class="sub-nav-container">
<!-- SHOP NAV START -->
<div class="sub-nav-inner-container container-shop carousel">
<div>
<p class="sub-nav-header"><a href="{{store url=" beers "}}">Beer</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" beer/new-in.html "}}">New In</a></p>
<p><a href="{{store url=" beer/headliners.html "}}">Headliners</a></p>
<p><a href="{{store url=" beer/seasonal.html "}}">Seasonal</a></p>
<p><a href="{{store url=" beer/year-round.html "}}">Year round</a></p>
<p><a href="{{store url=" beer/high-octane.html "}}">High Octane</a></p>
<p><a href="{{store url=" beer/overworks.html "}}">OverWorks</a></p>
<p><a href="{{store url=" beer/abstrakt.html "}}">Abstrakt</a></p>
<p><a href="{{store url=" beer/guest.html "}}">Guest</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" merch.html "}}">Merch</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" merch/clothing.html "}}">Clothing</a></p>
<p><a href="{{store url=" merch/chain-gang.html "}}">Chain Gang</a></p>
<p><a href="{{store url=" merch/barware-glasses.html "}}">Barware & Glasses</a></p>
<p><a href="#">Accessories</a></p>
<p><a href="{{store url=" merch/sale.html "}}">Sale</a></p>
<p><a href="{{store url=" merch/gifts.html "}}">Gifts</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="spirits.html">Spirits</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" gin.html "}}">Gin</a></p>
<p><a href="{{store url=" vodka.html "}}">Vodka</a></p>
<p><a href="{{store url=" whisky.html "}}">Whisky</a></p>
<p><a href="{{store url=" mixers.html "}}">Mixers</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Subscriptions</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" bottlebox "}}">Bottle Box</a></p>
<p><a href="{{store url=" fanzine "}}fanzine/">Fanzine</a></p>
<p><a href="#">Build and buy</a></p>
</div>
</div>
</div>
<!-- SHOP NAV END -->
<!-- BARS NAV START -->
<div class="sub-nav-inner-container container-experience carousel">
<div>
<p class="sub-nav-header"><a href="{{store url=" bars "}}">Bars</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" bars/uk "}}">UK</a></p>
<p><a href="{{store url=" bars/global "}}">International</a></p>
<p><a href="{{store url=" bars/us "}}">USA</a></p>
<p><a href="{{store url=" bars/coming-soon "}}">Coming Soon</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Bar Experience</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/chain-gang "}}">Chain Gang</a></p>
<p><a href="{{store url=" bars/uk/dogtap "}}">Dog Tap</a></p>
<p><a href="{{store url=" bars/beer-visa "}}">Beer Visa</a></p>
<p><a href="#">EFP Franchise Opportunities</a></p>
<p><a href="{{store url=" bars/festive "}}">Festive</a></p>
</div>
</div>
</div>
<!-- BARS NAV END -->
<!-- DISCOVER NAV START -->
<div class="sub-nav-inner-container container-extra-label carousel">
<div>
<p class="sub-nav-header"><a href="#">About</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/brewdog-believe "}}">BrewDog Believe</a></p>
<p><a href="{{store url=" about/culture/the-charter "}}">The Charter</a></p>
<p><a href="{{store url=" about/culture/culture-check "}}">Culture</a></p>
<p><a href="{{store url=" about/history "}}">History</a></p>
<p><a href="{{store url=" about/brewdogfoundation "}}">BrewDog Foundation</a></p>
<p><a href="https://jobs.brewdog.com">Jobs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" lowdown/blog "}}">Blog</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" "}}">Brewdog News</a></p>
<p><a href="{{store url=" "}}">Business for Punks</a></p>
<p><a href="{{store url=" "}}">Video Blog</a></p>
<p><a href="{{store url=" "}}">Beer Rocks</a></p>
<p><a href="{{store url=" "}}">Brewery Updates</a></p>
<p><a href="{{store url=" "}}">Caption Competition</a></p>
<p><a href="{{store url=" "}}">Dog's Blogs</a></p>
<p><a href="{{store url=" "}}">BrewDog Bars</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" brewery "}}">Brewery</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" brewery/ellon-brewery "}}">Beer Making Process</a></p>
<p><a href="#">Ellon</a></p>
<p><a href="{{store url=" brewery/overworks-brewery "}}">OverWorks</a></p>
<p><a href="{{store url=" brewery/usa-brewery "}}">Columbus</a></p>
<p><a href="{{store url=" brewery/brisbane-brewery "}}">Brisbane</a></p>
<p><a href="#">DIY Dog</a></p>
<p><a href="{{store url=" dog-house "}}">DogHouse</a></p>
<p><a href="#">Quality Labs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Events</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" events/collabfest "}}">Collabfest</a></p>
<p><a href="{{store url=" events/metro-mayhem "}}">Metro Mayhem</a></p>
<p><a href="{{store url=" events/agm2018 "}}">AGM</a></p>
</div>
</div>
</div>
<!-- DISCOVER NAV END -->
<!-- EFP NAV START -->
<div class="sub-nav-inner-container container-extra-equity carousel">
<div>
<p class="sub-nav-header">Equity For Punks</p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/brewdog-believe "}}">EFP UK</a></p>
<p><a href="{{store url=" about/culture/the-charter "}}">EFP USA</a></p>
<p><a href="{{store url=" about/culture/culture-check "}}">EFP Australia</a></p>
<p><a href="{{store url=" about/history "}}">EFP Re-Brews</a></p>
<p><a href="{{store url=" about/brewdogfoundation "}}">Blue Print</a></p>
</div>
</div>
</div>
<!-- EFP NAV END -->
</div>
</div>answered Nov 16 '18 at 5:44
KaranKaran
3,1252424
Change first line to $(".nav-header").click(function() {.
For last two lines. Replace it with following snippet. I've fetched index of clicked header and displayed .sub-nav-inner-container of same index.
var index = $(".nav-header").index(this);
$(".sub-nav-inner-container:nth(" + index + ")").show();
$(".sub-nav-inner-container:nth(" + index + ")").find(".sub-nav-inner-container").css("display", "flex");
// All Nav Header
$(".nav-header").click(function() {
$(".sub-nav-inner-container div").show();
if (($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left", "-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left: "0"
}, {
duration: 300,
easing: "linear"
});
}
if (($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left", "50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left: "0"
}, {
duration: 200,
easing: "linear"
});
}
if (($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left", "150px");
$('.sub-nav-inner-container').animate({
paddingLeft: "65px"
}, {
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
var index = $(".nav-header").index(this);
$(".sub-nav-inner-container:nth(" + index + ")").show();
$(".sub-nav-inner-container:nth(" + index + ")").find(".sub-nav-inner-container").css("display", "flex");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="sidebar-sub-nav display-none wrapper">
<div class="slider"></div>
<ul class="sub-nav-category nav nav-tabs nav-justified">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-shop">Shop</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-experience">Bars</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-label">Discover BrewDog</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-equity">Equity for Punks</span></a>
</li>
</ul>
<div class="sub-nav-container">
<!-- SHOP NAV START -->
<div class="sub-nav-inner-container container-shop carousel">
<div>
<p class="sub-nav-header"><a href="{{store url=" beers "}}">Beer</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" beer/new-in.html "}}">New In</a></p>
<p><a href="{{store url=" beer/headliners.html "}}">Headliners</a></p>
<p><a href="{{store url=" beer/seasonal.html "}}">Seasonal</a></p>
<p><a href="{{store url=" beer/year-round.html "}}">Year round</a></p>
<p><a href="{{store url=" beer/high-octane.html "}}">High Octane</a></p>
<p><a href="{{store url=" beer/overworks.html "}}">OverWorks</a></p>
<p><a href="{{store url=" beer/abstrakt.html "}}">Abstrakt</a></p>
<p><a href="{{store url=" beer/guest.html "}}">Guest</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" merch.html "}}">Merch</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" merch/clothing.html "}}">Clothing</a></p>
<p><a href="{{store url=" merch/chain-gang.html "}}">Chain Gang</a></p>
<p><a href="{{store url=" merch/barware-glasses.html "}}">Barware & Glasses</a></p>
<p><a href="#">Accessories</a></p>
<p><a href="{{store url=" merch/sale.html "}}">Sale</a></p>
<p><a href="{{store url=" merch/gifts.html "}}">Gifts</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="spirits.html">Spirits</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" gin.html "}}">Gin</a></p>
<p><a href="{{store url=" vodka.html "}}">Vodka</a></p>
<p><a href="{{store url=" whisky.html "}}">Whisky</a></p>
<p><a href="{{store url=" mixers.html "}}">Mixers</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Subscriptions</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" bottlebox "}}">Bottle Box</a></p>
<p><a href="{{store url=" fanzine "}}fanzine/">Fanzine</a></p>
<p><a href="#">Build and buy</a></p>
</div>
</div>
</div>
<!-- SHOP NAV END -->
<!-- BARS NAV START -->
<div class="sub-nav-inner-container container-experience carousel">
<div>
<p class="sub-nav-header"><a href="{{store url=" bars "}}">Bars</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" bars/uk "}}">UK</a></p>
<p><a href="{{store url=" bars/global "}}">International</a></p>
<p><a href="{{store url=" bars/us "}}">USA</a></p>
<p><a href="{{store url=" bars/coming-soon "}}">Coming Soon</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Bar Experience</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/chain-gang "}}">Chain Gang</a></p>
<p><a href="{{store url=" bars/uk/dogtap "}}">Dog Tap</a></p>
<p><a href="{{store url=" bars/beer-visa "}}">Beer Visa</a></p>
<p><a href="#">EFP Franchise Opportunities</a></p>
<p><a href="{{store url=" bars/festive "}}">Festive</a></p>
</div>
</div>
</div>
<!-- BARS NAV END -->
<!-- DISCOVER NAV START -->
<div class="sub-nav-inner-container container-extra-label carousel">
<div>
<p class="sub-nav-header"><a href="#">About</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/brewdog-believe "}}">BrewDog Believe</a></p>
<p><a href="{{store url=" about/culture/the-charter "}}">The Charter</a></p>
<p><a href="{{store url=" about/culture/culture-check "}}">Culture</a></p>
<p><a href="{{store url=" about/history "}}">History</a></p>
<p><a href="{{store url=" about/brewdogfoundation "}}">BrewDog Foundation</a></p>
<p><a href="https://jobs.brewdog.com">Jobs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" lowdown/blog "}}">Blog</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" "}}">Brewdog News</a></p>
<p><a href="{{store url=" "}}">Business for Punks</a></p>
<p><a href="{{store url=" "}}">Video Blog</a></p>
<p><a href="{{store url=" "}}">Beer Rocks</a></p>
<p><a href="{{store url=" "}}">Brewery Updates</a></p>
<p><a href="{{store url=" "}}">Caption Competition</a></p>
<p><a href="{{store url=" "}}">Dog's Blogs</a></p>
<p><a href="{{store url=" "}}">BrewDog Bars</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" brewery "}}">Brewery</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" brewery/ellon-brewery "}}">Beer Making Process</a></p>
<p><a href="#">Ellon</a></p>
<p><a href="{{store url=" brewery/overworks-brewery "}}">OverWorks</a></p>
<p><a href="{{store url=" brewery/usa-brewery "}}">Columbus</a></p>
<p><a href="{{store url=" brewery/brisbane-brewery "}}">Brisbane</a></p>
<p><a href="#">DIY Dog</a></p>
<p><a href="{{store url=" dog-house "}}">DogHouse</a></p>
<p><a href="#">Quality Labs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Events</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" events/collabfest "}}">Collabfest</a></p>
<p><a href="{{store url=" events/metro-mayhem "}}">Metro Mayhem</a></p>
<p><a href="{{store url=" events/agm2018 "}}">AGM</a></p>
</div>
</div>
</div>
<!-- DISCOVER NAV END -->
<!-- EFP NAV START -->
<div class="sub-nav-inner-container container-extra-equity carousel">
<div>
<p class="sub-nav-header">Equity For Punks</p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/brewdog-believe "}}">EFP UK</a></p>
<p><a href="{{store url=" about/culture/the-charter "}}">EFP USA</a></p>
<p><a href="{{store url=" about/culture/culture-check "}}">EFP Australia</a></p>
<p><a href="{{store url=" about/history "}}">EFP Re-Brews</a></p>
<p><a href="{{store url=" about/brewdogfoundation "}}">Blue Print</a></p>
</div>
</div>
</div>
<!-- EFP NAV END -->
</div>
</div>// All Nav Header
$(".nav-header").click(function() {
$(".sub-nav-inner-container div").show();
if (($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left", "-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left: "0"
}, {
duration: 300,
easing: "linear"
});
}
if (($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left", "50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left: "0"
}, {
duration: 200,
easing: "linear"
});
}
if (($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left", "150px");
$('.sub-nav-inner-container').animate({
paddingLeft: "65px"
}, {
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
var index = $(".nav-header").index(this);
$(".sub-nav-inner-container:nth(" + index + ")").show();
$(".sub-nav-inner-container:nth(" + index + ")").find(".sub-nav-inner-container").css("display", "flex");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="sidebar-sub-nav display-none wrapper">
<div class="slider"></div>
<ul class="sub-nav-category nav nav-tabs nav-justified">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-shop">Shop</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-experience">Bars</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-label">Discover BrewDog</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-equity">Equity for Punks</span></a>
</li>
</ul>
<div class="sub-nav-container">
<!-- SHOP NAV START -->
<div class="sub-nav-inner-container container-shop carousel">
<div>
<p class="sub-nav-header"><a href="{{store url=" beers "}}">Beer</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" beer/new-in.html "}}">New In</a></p>
<p><a href="{{store url=" beer/headliners.html "}}">Headliners</a></p>
<p><a href="{{store url=" beer/seasonal.html "}}">Seasonal</a></p>
<p><a href="{{store url=" beer/year-round.html "}}">Year round</a></p>
<p><a href="{{store url=" beer/high-octane.html "}}">High Octane</a></p>
<p><a href="{{store url=" beer/overworks.html "}}">OverWorks</a></p>
<p><a href="{{store url=" beer/abstrakt.html "}}">Abstrakt</a></p>
<p><a href="{{store url=" beer/guest.html "}}">Guest</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" merch.html "}}">Merch</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" merch/clothing.html "}}">Clothing</a></p>
<p><a href="{{store url=" merch/chain-gang.html "}}">Chain Gang</a></p>
<p><a href="{{store url=" merch/barware-glasses.html "}}">Barware & Glasses</a></p>
<p><a href="#">Accessories</a></p>
<p><a href="{{store url=" merch/sale.html "}}">Sale</a></p>
<p><a href="{{store url=" merch/gifts.html "}}">Gifts</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="spirits.html">Spirits</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" gin.html "}}">Gin</a></p>
<p><a href="{{store url=" vodka.html "}}">Vodka</a></p>
<p><a href="{{store url=" whisky.html "}}">Whisky</a></p>
<p><a href="{{store url=" mixers.html "}}">Mixers</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Subscriptions</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" bottlebox "}}">Bottle Box</a></p>
<p><a href="{{store url=" fanzine "}}fanzine/">Fanzine</a></p>
<p><a href="#">Build and buy</a></p>
</div>
</div>
</div>
<!-- SHOP NAV END -->
<!-- BARS NAV START -->
<div class="sub-nav-inner-container container-experience carousel">
<div>
<p class="sub-nav-header"><a href="{{store url=" bars "}}">Bars</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" bars/uk "}}">UK</a></p>
<p><a href="{{store url=" bars/global "}}">International</a></p>
<p><a href="{{store url=" bars/us "}}">USA</a></p>
<p><a href="{{store url=" bars/coming-soon "}}">Coming Soon</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Bar Experience</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/chain-gang "}}">Chain Gang</a></p>
<p><a href="{{store url=" bars/uk/dogtap "}}">Dog Tap</a></p>
<p><a href="{{store url=" bars/beer-visa "}}">Beer Visa</a></p>
<p><a href="#">EFP Franchise Opportunities</a></p>
<p><a href="{{store url=" bars/festive "}}">Festive</a></p>
</div>
</div>
</div>
<!-- BARS NAV END -->
<!-- DISCOVER NAV START -->
<div class="sub-nav-inner-container container-extra-label carousel">
<div>
<p class="sub-nav-header"><a href="#">About</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/brewdog-believe "}}">BrewDog Believe</a></p>
<p><a href="{{store url=" about/culture/the-charter "}}">The Charter</a></p>
<p><a href="{{store url=" about/culture/culture-check "}}">Culture</a></p>
<p><a href="{{store url=" about/history "}}">History</a></p>
<p><a href="{{store url=" about/brewdogfoundation "}}">BrewDog Foundation</a></p>
<p><a href="https://jobs.brewdog.com">Jobs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" lowdown/blog "}}">Blog</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" "}}">Brewdog News</a></p>
<p><a href="{{store url=" "}}">Business for Punks</a></p>
<p><a href="{{store url=" "}}">Video Blog</a></p>
<p><a href="{{store url=" "}}">Beer Rocks</a></p>
<p><a href="{{store url=" "}}">Brewery Updates</a></p>
<p><a href="{{store url=" "}}">Caption Competition</a></p>
<p><a href="{{store url=" "}}">Dog's Blogs</a></p>
<p><a href="{{store url=" "}}">BrewDog Bars</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" brewery "}}">Brewery</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" brewery/ellon-brewery "}}">Beer Making Process</a></p>
<p><a href="#">Ellon</a></p>
<p><a href="{{store url=" brewery/overworks-brewery "}}">OverWorks</a></p>
<p><a href="{{store url=" brewery/usa-brewery "}}">Columbus</a></p>
<p><a href="{{store url=" brewery/brisbane-brewery "}}">Brisbane</a></p>
<p><a href="#">DIY Dog</a></p>
<p><a href="{{store url=" dog-house "}}">DogHouse</a></p>
<p><a href="#">Quality Labs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Events</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" events/collabfest "}}">Collabfest</a></p>
<p><a href="{{store url=" events/metro-mayhem "}}">Metro Mayhem</a></p>
<p><a href="{{store url=" events/agm2018 "}}">AGM</a></p>
</div>
</div>
</div>
<!-- DISCOVER NAV END -->
<!-- EFP NAV START -->
<div class="sub-nav-inner-container container-extra-equity carousel">
<div>
<p class="sub-nav-header">Equity For Punks</p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/brewdog-believe "}}">EFP UK</a></p>
<p><a href="{{store url=" about/culture/the-charter "}}">EFP USA</a></p>
<p><a href="{{store url=" about/culture/culture-check "}}">EFP Australia</a></p>
<p><a href="{{store url=" about/history "}}">EFP Re-Brews</a></p>
<p><a href="{{store url=" about/brewdogfoundation "}}">Blue Print</a></p>
</div>
</div>
</div>
<!-- EFP NAV END -->
</div>
</div>// All Nav Header
$(".nav-header").click(function() {
$(".sub-nav-inner-container div").show();
if (($(window).innerWidth() >= 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left", "-100px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left: "0"
}, {
duration: 300,
easing: "linear"
});
}
if (($(window).innerWidth() < 993)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left", "50px");
$('.sub-nav-inner-container .slick-list.draggable').animate({
left: "0"
}, {
duration: 200,
easing: "linear"
});
}
if (($(window).innerWidth() < 476)) {
$('.sub-nav-inner-container').css("padding-left", "150px");
$('.sub-nav-inner-container').animate({
paddingLeft: "65px"
}, {
duration: 200,
easing: "linear"
});
}
$(".sub-nav-inner-container").hide();
var index = $(".nav-header").index(this);
$(".sub-nav-inner-container:nth(" + index + ")").show();
$(".sub-nav-inner-container:nth(" + index + ")").find(".sub-nav-inner-container").css("display", "flex");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="sidebar-sub-nav display-none wrapper">
<div class="slider"></div>
<ul class="sub-nav-category nav nav-tabs nav-justified">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-shop">Shop</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-experience">Bars</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-label">Discover BrewDog</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-equity">Equity for Punks</span></a>
</li>
</ul>
<div class="sub-nav-container">
<!-- SHOP NAV START -->
<div class="sub-nav-inner-container container-shop carousel">
<div>
<p class="sub-nav-header"><a href="{{store url=" beers "}}">Beer</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" beer/new-in.html "}}">New In</a></p>
<p><a href="{{store url=" beer/headliners.html "}}">Headliners</a></p>
<p><a href="{{store url=" beer/seasonal.html "}}">Seasonal</a></p>
<p><a href="{{store url=" beer/year-round.html "}}">Year round</a></p>
<p><a href="{{store url=" beer/high-octane.html "}}">High Octane</a></p>
<p><a href="{{store url=" beer/overworks.html "}}">OverWorks</a></p>
<p><a href="{{store url=" beer/abstrakt.html "}}">Abstrakt</a></p>
<p><a href="{{store url=" beer/guest.html "}}">Guest</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" merch.html "}}">Merch</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" merch/clothing.html "}}">Clothing</a></p>
<p><a href="{{store url=" merch/chain-gang.html "}}">Chain Gang</a></p>
<p><a href="{{store url=" merch/barware-glasses.html "}}">Barware & Glasses</a></p>
<p><a href="#">Accessories</a></p>
<p><a href="{{store url=" merch/sale.html "}}">Sale</a></p>
<p><a href="{{store url=" merch/gifts.html "}}">Gifts</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="spirits.html">Spirits</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" gin.html "}}">Gin</a></p>
<p><a href="{{store url=" vodka.html "}}">Vodka</a></p>
<p><a href="{{store url=" whisky.html "}}">Whisky</a></p>
<p><a href="{{store url=" mixers.html "}}">Mixers</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Subscriptions</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" bottlebox "}}">Bottle Box</a></p>
<p><a href="{{store url=" fanzine "}}fanzine/">Fanzine</a></p>
<p><a href="#">Build and buy</a></p>
</div>
</div>
</div>
<!-- SHOP NAV END -->
<!-- BARS NAV START -->
<div class="sub-nav-inner-container container-experience carousel">
<div>
<p class="sub-nav-header"><a href="{{store url=" bars "}}">Bars</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" bars/uk "}}">UK</a></p>
<p><a href="{{store url=" bars/global "}}">International</a></p>
<p><a href="{{store url=" bars/us "}}">USA</a></p>
<p><a href="{{store url=" bars/coming-soon "}}">Coming Soon</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Bar Experience</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/chain-gang "}}">Chain Gang</a></p>
<p><a href="{{store url=" bars/uk/dogtap "}}">Dog Tap</a></p>
<p><a href="{{store url=" bars/beer-visa "}}">Beer Visa</a></p>
<p><a href="#">EFP Franchise Opportunities</a></p>
<p><a href="{{store url=" bars/festive "}}">Festive</a></p>
</div>
</div>
</div>
<!-- BARS NAV END -->
<!-- DISCOVER NAV START -->
<div class="sub-nav-inner-container container-extra-label carousel">
<div>
<p class="sub-nav-header"><a href="#">About</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/brewdog-believe "}}">BrewDog Believe</a></p>
<p><a href="{{store url=" about/culture/the-charter "}}">The Charter</a></p>
<p><a href="{{store url=" about/culture/culture-check "}}">Culture</a></p>
<p><a href="{{store url=" about/history "}}">History</a></p>
<p><a href="{{store url=" about/brewdogfoundation "}}">BrewDog Foundation</a></p>
<p><a href="https://jobs.brewdog.com">Jobs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" lowdown/blog "}}">Blog</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" "}}">Brewdog News</a></p>
<p><a href="{{store url=" "}}">Business for Punks</a></p>
<p><a href="{{store url=" "}}">Video Blog</a></p>
<p><a href="{{store url=" "}}">Beer Rocks</a></p>
<p><a href="{{store url=" "}}">Brewery Updates</a></p>
<p><a href="{{store url=" "}}">Caption Competition</a></p>
<p><a href="{{store url=" "}}">Dog's Blogs</a></p>
<p><a href="{{store url=" "}}">BrewDog Bars</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="{{store url=" brewery "}}">Brewery</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" brewery/ellon-brewery "}}">Beer Making Process</a></p>
<p><a href="#">Ellon</a></p>
<p><a href="{{store url=" brewery/overworks-brewery "}}">OverWorks</a></p>
<p><a href="{{store url=" brewery/usa-brewery "}}">Columbus</a></p>
<p><a href="{{store url=" brewery/brisbane-brewery "}}">Brisbane</a></p>
<p><a href="#">DIY Dog</a></p>
<p><a href="{{store url=" dog-house "}}">DogHouse</a></p>
<p><a href="#">Quality Labs</a></p>
</div>
</div>
<div>
<p class="sub-nav-header"><a href="#">Events</a></p>
<div class="sub-nav-contents">
<p><a href="{{store url=" events/collabfest "}}">Collabfest</a></p>
<p><a href="{{store url=" events/metro-mayhem "}}">Metro Mayhem</a></p>
<p><a href="{{store url=" events/agm2018 "}}">AGM</a></p>
</div>
</div>
</div>
<!-- DISCOVER NAV END -->
<!-- EFP NAV START -->
<div class="sub-nav-inner-container container-extra-equity carousel">
<div>
<p class="sub-nav-header">Equity For Punks</p>
<div class="sub-nav-contents">
<p><a href="{{store url=" lowdown/brewdog-believe "}}">EFP UK</a></p>
<p><a href="{{store url=" about/culture/the-charter "}}">EFP USA</a></p>
<p><a href="{{store url=" about/culture/culture-check "}}">EFP Australia</a></p>
<p><a href="{{store url=" about/history "}}">EFP Re-Brews</a></p>
<p><a href="{{store url=" about/brewdogfoundation "}}">Blue Print</a></p>
</div>
</div>
</div>
<!-- EFP NAV END -->
</div>
</div>answered Nov 16 '18 at 5:44
KaranKaran
3,1252424
answered Nov 16 '18 at 5:44
KaranKaran
3,1252424
answered Nov 16 '18 at 5:44
KaranKaran
3,1252424
answered Nov 16 '18 at 5:44
KaranKaran
3,1252424
3,1252424
add a comment |
add a comment |
1
You could use some forEach loops to generate it, like so.
function addAnimations (params) {
if(($(window).innerWidth() >= params.width)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left",`${params.left}px`);
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: params.duration,
easing: "linear"
});
}
}
function bindHeader (selector) {
var params = [
{width: 993, left: -100, duration: 300},
{width: 993, left: -50, duration: 200},
{width: 476, left: -150, duration: 200}
];
$(selector.header).click(function() {
$(".sub-nav-inner-container div").show();
params.forEach(function(param) {
addAnimations(param)
});
$(".sub-nav-inner-container").hide();
$(selector.menu).show();
$(`${selector.menu} .sub-nav-inner-container`).css("display","flex");
});
}
var selectors = [
{header: '.header-experience', menu: '.container-experience'},
{header: '.header-shop', menu: '.container-shop'},
{header: '.header-extra-label', menu: '.container-extra-label'},
{header: '.header-extra-equity', menu: '.container-extra-equity'}
]
selectors.forEach(function(selector) {
bindHeader(selector);
})
answered Nov 16 '18 at 3:34
AnonymousSBAnonymousSB
2,184221
What if in future somebody adds 1 more nav header? Then click function won't work.
– Naveen L Bhandari
Nov 16 '18 at 3:39
You'd just callbindHeader()with the selector for the new header
– AnonymousSB
Nov 16 '18 at 3:40
Not sure but I'm getting this error Unexpected token, expected { (21:35) codepen.io/naveenborn/pen/BGZZwg
– Naveen L Bhandari
Nov 16 '18 at 4:05
That's because I accidentally left an ES6 fat arrow in there, just get rid of the=>on line 21. I've updated my code example, so just copy/paste it again, because I forgot a closing)on line 23 as well.
– AnonymousSB
Nov 16 '18 at 4:07
Thanks for all your answers. But I see 1 more error Unexpected token, expected , (24:4) I don't know how that is an error
– Naveen L Bhandari
Nov 16 '18 at 4:16
|
show 5 more comments
1
You could use some forEach loops to generate it, like so.
function addAnimations (params) {
if(($(window).innerWidth() >= params.width)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left",`${params.left}px`);
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: params.duration,
easing: "linear"
});
}
}
function bindHeader (selector) {
var params = [
{width: 993, left: -100, duration: 300},
{width: 993, left: -50, duration: 200},
{width: 476, left: -150, duration: 200}
];
$(selector.header).click(function() {
$(".sub-nav-inner-container div").show();
params.forEach(function(param) {
addAnimations(param)
});
$(".sub-nav-inner-container").hide();
$(selector.menu).show();
$(`${selector.menu} .sub-nav-inner-container`).css("display","flex");
});
}
var selectors = [
{header: '.header-experience', menu: '.container-experience'},
{header: '.header-shop', menu: '.container-shop'},
{header: '.header-extra-label', menu: '.container-extra-label'},
{header: '.header-extra-equity', menu: '.container-extra-equity'}
]
selectors.forEach(function(selector) {
bindHeader(selector);
})
answered Nov 16 '18 at 3:34
AnonymousSBAnonymousSB
2,184221
What if in future somebody adds 1 more nav header? Then click function won't work.
– Naveen L Bhandari
Nov 16 '18 at 3:39
You'd just callbindHeader()with the selector for the new header
– AnonymousSB
Nov 16 '18 at 3:40
Not sure but I'm getting this error Unexpected token, expected { (21:35) codepen.io/naveenborn/pen/BGZZwg
– Naveen L Bhandari
Nov 16 '18 at 4:05
That's because I accidentally left an ES6 fat arrow in there, just get rid of the=>on line 21. I've updated my code example, so just copy/paste it again, because I forgot a closing)on line 23 as well.
– AnonymousSB
Nov 16 '18 at 4:07
Thanks for all your answers. But I see 1 more error Unexpected token, expected , (24:4) I don't know how that is an error
– Naveen L Bhandari
Nov 16 '18 at 4:16
|
show 5 more comments
1
1
1
You could use some forEach loops to generate it, like so.
function addAnimations (params) {
if(($(window).innerWidth() >= params.width)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left",`${params.left}px`);
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: params.duration,
easing: "linear"
});
}
}
function bindHeader (selector) {
var params = [
{width: 993, left: -100, duration: 300},
{width: 993, left: -50, duration: 200},
{width: 476, left: -150, duration: 200}
];
$(selector.header).click(function() {
$(".sub-nav-inner-container div").show();
params.forEach(function(param) {
addAnimations(param)
});
$(".sub-nav-inner-container").hide();
$(selector.menu).show();
$(`${selector.menu} .sub-nav-inner-container`).css("display","flex");
});
}
var selectors = [
{header: '.header-experience', menu: '.container-experience'},
{header: '.header-shop', menu: '.container-shop'},
{header: '.header-extra-label', menu: '.container-extra-label'},
{header: '.header-extra-equity', menu: '.container-extra-equity'}
]
selectors.forEach(function(selector) {
bindHeader(selector);
})
answered Nov 16 '18 at 3:34
AnonymousSBAnonymousSB
2,184221
You could use some forEach loops to generate it, like so.
function addAnimations (params) {
if(($(window).innerWidth() >= params.width)) {
$('.sub-nav-inner-container .slick-list.draggable').css("left",`${params.left}px`);
$('.sub-nav-inner-container .slick-list.draggable').animate({
left:"0"
},{
duration: params.duration,
easing: "linear"
});
}
}
function bindHeader (selector) {
var params = [
{width: 993, left: -100, duration: 300},
{width: 993, left: -50, duration: 200},
{width: 476, left: -150, duration: 200}
];
$(selector.header).click(function() {
$(".sub-nav-inner-container div").show();
params.forEach(function(param) {
addAnimations(param)
});
$(".sub-nav-inner-container").hide();
$(selector.menu).show();
$(`${selector.menu} .sub-nav-inner-container`).css("display","flex");
});
}
var selectors = [
{header: '.header-experience', menu: '.container-experience'},
{header: '.header-shop', menu: '.container-shop'},
{header: '.header-extra-label', menu: '.container-extra-label'},
{header: '.header-extra-equity', menu: '.container-extra-equity'}
]
selectors.forEach(function(selector) {
bindHeader(selector);
})
answered Nov 16 '18 at 3:34
AnonymousSBAnonymousSB
2,184221
edited Nov 16 '18 at 5:28
answered Nov 16 '18 at 3:34
AnonymousSBAnonymousSB
2,184221
answered Nov 16 '18 at 3:34
AnonymousSBAnonymousSB
2,184221
answered Nov 16 '18 at 3:34
AnonymousSBAnonymousSB
2,184221
2,184221
What if in future somebody adds 1 more nav header? Then click function won't work.
– Naveen L Bhandari
Nov 16 '18 at 3:39
You'd just callbindHeader()with the selector for the new header
– AnonymousSB
Nov 16 '18 at 3:40
Not sure but I'm getting this error Unexpected token, expected { (21:35) codepen.io/naveenborn/pen/BGZZwg
– Naveen L Bhandari
Nov 16 '18 at 4:05
That's because I accidentally left an ES6 fat arrow in there, just get rid of the=>on line 21. I've updated my code example, so just copy/paste it again, because I forgot a closing)on line 23 as well.
– AnonymousSB
Nov 16 '18 at 4:07
Thanks for all your answers. But I see 1 more error Unexpected token, expected , (24:4) I don't know how that is an error
– Naveen L Bhandari
Nov 16 '18 at 4:16
|
show 5 more comments
What if in future somebody adds 1 more nav header? Then click function won't work.
– Naveen L Bhandari
Nov 16 '18 at 3:39
You'd just callbindHeader()with the selector for the new header
– AnonymousSB
Nov 16 '18 at 3:40
Not sure but I'm getting this error Unexpected token, expected { (21:35) codepen.io/naveenborn/pen/BGZZwg
– Naveen L Bhandari
Nov 16 '18 at 4:05
That's because I accidentally left an ES6 fat arrow in there, just get rid of the=>on line 21. I've updated my code example, so just copy/paste it again, because I forgot a closing)on line 23 as well.
– AnonymousSB
Nov 16 '18 at 4:07
Thanks for all your answers. But I see 1 more error Unexpected token, expected , (24:4) I don't know how that is an error
– Naveen L Bhandari
Nov 16 '18 at 4:16
What if in future somebody adds 1 more nav header? Then click function won't work.
– Naveen L Bhandari
Nov 16 '18 at 3:39
What if in future somebody adds 1 more nav header? Then click function won't work.
– Naveen L Bhandari
Nov 16 '18 at 3:39
You'd just call
bindHeader() with the selector for the new header– AnonymousSB
Nov 16 '18 at 3:40
You'd just call
bindHeader() with the selector for the new header– AnonymousSB
Nov 16 '18 at 3:40
Not sure but I'm getting this error Unexpected token, expected { (21:35) codepen.io/naveenborn/pen/BGZZwg
– Naveen L Bhandari
Nov 16 '18 at 4:05
Not sure but I'm getting this error Unexpected token, expected { (21:35) codepen.io/naveenborn/pen/BGZZwg
– Naveen L Bhandari
Nov 16 '18 at 4:05
That's because I accidentally left an ES6 fat arrow in there, just get rid of the
=> on line 21. I've updated my code example, so just copy/paste it again, because I forgot a closing ) on line 23 as well.– AnonymousSB
Nov 16 '18 at 4:07
That's because I accidentally left an ES6 fat arrow in there, just get rid of the
=> on line 21. I've updated my code example, so just copy/paste it again, because I forgot a closing ) on line 23 as well.– AnonymousSB
Nov 16 '18 at 4:07
Thanks for all your answers. But I see 1 more error Unexpected token, expected , (24:4) I don't know how that is an error
– Naveen L Bhandari
Nov 16 '18 at 4:16
Thanks for all your answers. But I see 1 more error Unexpected token, expected , (24:4) I don't know how that is an error
– Naveen L Bhandari
Nov 16 '18 at 4:16
|
show 5 more comments
0
You can target all your elements by using the 'comma' separator in your selector:
$(".header-experience, .header-shop, .header-extra-label, .header-extra-equity").click(function() {
Now all elements will trigger the same click eventhandler.
When it comes to the last 2 lines, that are different, simply use an if sentence:
if ($this).is(".header-experience"))
{
$(".container-experience").show();
$(".container-experience .sub-nav-inner-container").css("display","flex");
}
else if …….
answered Nov 16 '18 at 3:33
Poul BakPoul Bak
5,46831232
add a comment |
0
You can target all your elements by using the 'comma' separator in your selector:
$(".header-experience, .header-shop, .header-extra-label, .header-extra-equity").click(function() {
Now all elements will trigger the same click eventhandler.
When it comes to the last 2 lines, that are different, simply use an if sentence:
if ($this).is(".header-experience"))
{
$(".container-experience").show();
$(".container-experience .sub-nav-inner-container").css("display","flex");
}
else if …….
answered Nov 16 '18 at 3:33
Poul BakPoul Bak
5,46831232
add a comment |
0
0
0
You can target all your elements by using the 'comma' separator in your selector:
$(".header-experience, .header-shop, .header-extra-label, .header-extra-equity").click(function() {
Now all elements will trigger the same click eventhandler.
When it comes to the last 2 lines, that are different, simply use an if sentence:
if ($this).is(".header-experience"))
{
$(".container-experience").show();
$(".container-experience .sub-nav-inner-container").css("display","flex");
}
else if …….
answered Nov 16 '18 at 3:33
Poul BakPoul Bak
5,46831232
You can target all your elements by using the 'comma' separator in your selector:
$(".header-experience, .header-shop, .header-extra-label, .header-extra-equity").click(function() {
Now all elements will trigger the same click eventhandler.
When it comes to the last 2 lines, that are different, simply use an if sentence:
if ($this).is(".header-experience"))
{
$(".container-experience").show();
$(".container-experience .sub-nav-inner-container").css("display","flex");
}
else if …….
answered Nov 16 '18 at 3:33
Poul BakPoul Bak
5,46831232
answered Nov 16 '18 at 3:33
Poul BakPoul Bak
5,46831232
answered Nov 16 '18 at 3:33
Poul BakPoul Bak
5,46831232
answered Nov 16 '18 at 3:33
Poul BakPoul Bak
5,46831232
5,46831232
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330964%2fadding-the-js-jquery-click-functionality-for-extra-elements%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What you are looking for is called Event Delegation. Add your event handler to the parent element (the UL). The event will "Bubble" up to that element. You can the determine which element was clicked using the
event.targetobject property.– Randy Casburn
Nov 16 '18 at 3:31