How can I toggle the secondary navigation links after clicking the "HEADER" button (under the "this should toggle the ul links"), and only one at a time. When the user clicks the button, it should close any other subnav links at its level, only allowing one to be open at a time. It should also be able to close, without triggering the other to open.
<div class="inner">
<button data-target="#data-nav-0" data-toggle="collapse" data-state="show" class="list-header major no-style"> <span>HEADER</span> </button>
<div class="col-wrapper collapse in" id="data-nav-0" style="display: block;">
<div class="column">
<ul class="list-unstyled">
<li class="list-header mobile">link</li>
<li class="list-header desktop">head</li>
<li class="mobile chevron-right" data-target="#data-inner-0-0" data-toggle="collapse" data-state="hide">
<button class="no-style">This should toggle the ul links</button>
</li>
<ul class="inner collapse" id="data-inner-0-0">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</ul>
</div>
<div class="column">
<ul class="list-unstyled">
<li class="list-header desktop">Link</li>
<li class="mobile chevron-right" data-target="#data-inner-0-1" data-toggle="collapse" data-state="hide">
<button class="no-style">This should toggle the ul links</button>
</li>
<ul class="inner collapse" id="data-inner-0-0">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</ul>
</ul>
</div>
</div>
</div>
jQuery
$('.list-header').next('div').toggle();
$('.list-header').click(function() {
$('.list-header').next('div').slideUp();
$(this).next('div').toggle();
return false;
});
$('.mobile').next('div').toggle();
$('.mobile').click(function() {
$('.mobile').next('div').slideUp();
$(this).next('div').toggle();
return false;
});
JSFIDDLE: https://jsfiddle.net/jdkwcpva/
This code solves your issue:
$('.mobile').next('ul').toggle(); // <-- .next('ul') instead of .next('div')
$('.mobile').click(function() {
$('.mobile').next('ul').slideUp(); // <-- same
$(this).next('ul').toggle(); // <-- same
return false;
});
DEMO
Related
I´ve got this navigation structure:
<nav class="navbar navbar-top mod_navigation " >
<div class="ws-navbar-collapse pull-left">
<ul class="nav navbar-nav">
<li class="submenu mega ncol-3 first nav-item dropdown subnav">
<a class="" href="url" >
<span itemprop="name">Lösungen</span>
</a>
<div class="subnav-container">
<div class="relative">
<ul class="nav sub-nav level-2">
<li class="submenu first subnav">
<a class=" " href="url" >
<span itemprop="name">Digitalisierung</span>
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
And I would like the click effect from this page:
https://www.invisionapp.com/
I've tried it with this js script, but its not working:
$('ul li.nav-item').on('click', function() {
if(!$('.subnav-container').is(':visible')){
$(".subnav-container" ).slideDown();
var $this = $(this);
$this.toggleClass('is-active').children('ul').toggleClass('is-visible');
} else {
$(".subnav-container" ).slideUp();
var $this = $(this);
$this.toggleClass('is-active').children('ul').toggleClass('is-visible');
}
});
So if the main navigation point got the class "submenu", the sub navigation "subnav-container" should slide down on click.
Im planning on slidding 2 divs at the same time ,each one in opposite directions.How can i do this?
this is what i have tried
$("button").click(function () {
$(".cuadro").animate({ left: '250px', queue: false });
$("#R").animate({ left: '-250px', queue: false });
});
also if it's possible i can this to happend when my services tab is active instead of when the person click on the button.
<section id="services" class="content-section text-center">
<div class="services-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h2><span class="auto-style2">Services</span></h2>
<h2> </h2>
<h2><strong>Technlogies and lenguages used for software developing<br />
</strong></h2>
<p class="btn btn-default btn-lg">Download Resume</p>
<p> </p>
<button id="serv">serv</button>
</div>
<div class="col-lg-9">
<div class="cuadro" id="L"><h2 class="leng">C#</h2></div>
</div>
<div class="col-lg-3">
<div class="cuadro" id="R"><h2 class="leng">JavaScript</h2></div>
</div>
</div>
</div>
</section>
this is my nav bar
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav" id="tabs">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li>
HOME
</li>
<li>
<a class="page-scroll" href="#about">ABOUT</a>
</li>
<li>
<a class="page-scroll" href="#download">RESUME</a>
</li>
<li>
<a class="page-scroll" id="serTab" href="#services">SERVICES</a>
</li>
<li>
<a class="page-scroll" href="#contact">CONTACT</a>
</li>
</ul>
</div>
This should do it:
$('#tabs').tabs();
$('#serTab').click(function(){
$("#R").animate({left:'-=250px'});
$("#L").animate({left:'+=250px'});
});
Note that id="tabs" must be moved from the <ul> to its parent <div>
If that doesn't work, you may need event delegation. Try this:
$(document).on('click', '#serTab', function(){
$("#R").animate({left:'-=250px'});
$("#L").animate({left:'+=250px'});
});
Reference:
http://davidwalsh.name/event-delegate
I want to design menu like below in picture :-
But I am not able to do it, here is my try :- http://jsfiddle.net/BqqqE/5/
Code Below :-
<div class="dropdown">
<a class="dropdown-toggle btn btn-danger" data-toggle="dropdown" href="#">Dropdown trigger <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="dropdown-submenu"><a tabindex="-1" href="index.php">Project</a>
<div class="dropdown-menu">
<div class="container">
<div class="row-fluid">
<div class="span6">
<ul class="unstyled">
<li class="nav-header">Category A </li>
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
<div class="span6">
<ul class="unstyled">
<li class="nav-header">Category A </li>
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Is above Menu Possible with Bootstrap ?
Thanks
Take a look at this JSFiddle. I've added class dropdown-menu-tworows. You can set width for submenu but it's not necessary.
.dropdown-menu-tworows .span6 {
width: 49%;
display: inline-block;
}
Is this what you wanted?
I'm trying to add multiple collapsable panels into navbar. so far I managed to collapse panel 1 when panel 2 is open. but it won't change the button 1 back to collapsed state. is there any way to add class "collapsed" to button 1 when button 2 being clicked?
<div id="header">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn collapsed" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-remove"></span> button 1
</button>
<button type="button" class="btn collapsed" data-toggle="collapse" data-target=".nav-collapse2">
<span class="icon-remove"></span> button 2
</button>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li class="">
Get started
</li>
<li class="">
Scaffolding
</li>
<li class="">
Base CSS
</li>
</ul>
</div>
<div class="nav-collapse2 collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li class="">
Get started
</li>
<li class="">
Scaffolding
</li>
<li class="">
Base CSS
</li>
</ul>
</div>
</div>
</div>
</div>
you can see the demo here: http://jsfiddle.net/Kierlens/3Uet8/
$(".btn").on("vclick", function(){
$(".btn").addClass("collapsed");
$(this).removeClass("collapsed");
return false;
});
I have a nav list with bootstrap for a mobile site and i can collapse and expand sections if i click the icon twice but when i click on a button the correct section collapses but when i click on a second button both sections stay open. I want the first one to close when i click on the second button.
Here is an example http://jsfiddle.net/MgcDU/2219/ .
<div class="navbar navbar-fixed-top visible-phone" style="margin-bottom: 0px;">
<div class="navbar-inner">
<div >
<ul class="nav ">
<li class="">
<i class="icon-filter"></i>
</li>
<li class="">
<i class="icon-plus"></i>
</li>
</ul>
</div>
<div class="nav-collapse nav-collapse-filter collapse">
<ul class="nav">
<li class="divider"></li>
<li class="nav-header">Filter By</li>
<li class="">Filter1</li>
<li class="">Filter2</li>
<li class="">Filter3</li>
<li class="">Filter4</li>
<li class="">Filter5</li>
<li class="">Filter6</li>
</ul>
</div>
<div class="nav-collapse nav-collapse-post collapse">
<ul class="nav">
<li class="divider"></li>
<li class="nav-header">Post something</li>
<li class="">Post1</li>
<li class="">Post2</li>
<li class="">Post3</li>
<li class="">Post4</li>
<li class="">Post5</li>
</ul>
</div>
Thanks.
You have to do some manual work I think to achieve that behaviour.
$("a[data-target='.nav-collapse-post']").click(function () {
$(".nav-collapse-filter").collapse("hide");
$(".nav-collapse-post").collapse('toggle');
});
$("a[data-target='.nav-collapse-filter']").click(function () {
$(".nav-collapse-post").collapse('hide');
$(".nav-collapse-filter").collapse("toggle");
});
And also remove the class collapse from nav-collapse-post and nav-collapse-filter if you don't want a strange behaviour on the first click.
Result: http://jsfiddle.net/ngHnh/