I want to hide div for all which are not active. but when ever i reload all the tab contents come into one. Below is a screenshot of the the UI where am facing the problem.
Below are the code.
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form animated fadeInDown ">
<ul class="tab-group">
<li class="tab active">Roles</li>
<li class="tab ">User</li>
<li class="tab ">Portfolio</li>
<li class="tab ">Programs</li>
<li class="tab ">Projects</li>
<li class="tab ">Phases</li>
<li class="tab ">Tasks</li>
</ul>
<div class="tab-content">
<div id="roles" >
<h1> Roles coming soon</h1>
</div>
<div id="user">
<h1>Users added soon</h1>
</div>
<div id="portfolio">
<h1>Portfolio added soon</h1>
</div>
<div id="programs">
<h1>Programs added soon</h1>
</div>
<div id="projects">
<h1>Projects added soon</h1>
</div>
<div id="phases">
<h1>Phases added soon</h1>
</div>
<div id="tasks">
<h1>Tasks added soon</h1>
</div>
</div>
</div>
I tried as much as possible but couldn't get this thing right. A help is much appreciated.
Just apply the given CSS, other than that your code seems working for me.
//See the first tab visible by default
$($('.tab-group > li.active').children('a').attr('href')).show();
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
.tab-content div{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form animated fadeInDown ">
<ul class="tab-group">
<li class="tab active">Roles</li>
<li class="tab ">User</li>
<li class="tab ">Portfolio</li>
<li class="tab ">Programs</li>
<li class="tab ">Projects</li>
<li class="tab ">Phases</li>
<li class="tab ">Tasks</li>
</ul>
<div class="tab-content">
<div id="roles">
<h1> Roles coming soon</h1>
</div>
<div id="user">
<h1>Users added soon</h1>
</div>
<div id="portfolio">
<h1>Portfolio added soon</h1>
</div>
<div id="programs">
<h1>Programs added soon</h1>
</div>
<div id="projects">
<h1>Projects added soon</h1>
</div>
<div id="phases">
<h1>Phases added soon</h1>
</div>
<div id="tasks">
<h1>Tasks added soon</h1>
</div>
</div>
</div>
Related
Lets say this is my HTML
<ul class="products>
<li class="product">
<div class="product-title></div>
<div class="product-thumbnail></div>
<div class="product-price></div>
<div class="product-discription></div>
</li>
<li class="product">
<div class="product-title></div>
<div class="product-thumbnail></div>
<div class="product-price></div>
<div class="product-discription></div>
</li>
</ul>
Now I want to wrap .product-thumbnail and .product-price in
<div class="left"></div>
Like this
<ul class="products>
<li class="product">
<div class="product-title></div>
<div class="left">
<div class="product-thumbnail></div>
<div class="product-price></div>
</div>
<div class="product-discription></div>
</li>
<li class="product">
<div class="product-title></div>
<div class="left">
<div class="product-thumbnail></div>
<div class="product-price></div>
</div>
<div class="product-discription></div>
</li>
</ul>
This code does the trick if I had only one list item
$(".product-thumbnail, .product-price").wrapAll("<div class='left'></div>");
I've tried an each() on .product-thubnail and .product-price but without results..
Does anyone know how I could do this or how it could be done with each()?
Iterate over the .product-title using each() method and combine with the immediate next element using add() method.
$('.product-title').each(function() {
$(this).add($(this).next()).wrapAll('<div class="left"></div>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products">
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
</ul>
Or iterate over the li and get both classes within the element by providing the context.
$('.product').each(function() {
$('.product-title,.product-thumbnail', this).wrapAll('<div class="left"></div>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products">
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
</ul>
I'm trying to have all tabs closed when I arrive on the page. Then, they should be activated on hover. Here's what I've done so far. I think I've done the hover part well, but I can't find how to close my tabs by default. Apparently removing the .active in HTML doesn't work.
<!-- TABS -->
<div class="col-xs-3 hidden-xs">
<div class="row">
<nav class="side-nav">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="full-width active">
TAB1
</li>
<li role="presentation" class="full-width">
TAB2
</li>
</ul>
</nav>
</div>
</div>
<!-- TAB CONTENT -->
<div class="tab-content col-xs-9">
<div role="tabpanel" class="tab-pane row active" id="tab1">
<div class="col-xs-4">
TAB CONTENT 1
</div>
</div>
<div role="tabpanel" class="tab-pane row active" id="tab2">
<div class="col-xs-4">
TAB CONTENT 2
</div>
</div>
</div>
This is my script
$('.nav-tabs > li > a').hover(function() {
$(this).tab('show');
});
I think you just have to remove the active class on your tab contents as you said.
Bootply : http://www.bootply.com/bXCz8Y7ZOh
HTML :
<!-- TAB CONTENT -->
<div class="tab-content col-xs-9">
<div role="tabpanel" class="tab-pane row" id="tab1">
<div class="col-xs-4">
TAB CONTENT 1
</div>
</div>
<div role="tabpanel" class="tab-pane row" id="tab2">
<div class="col-xs-4">
TAB CONTENT 2
</div>
</div>
</div>
Update with extanded javascripts: Over and Leave Toggle...
I think there should have better solutions than this one but it's working...
JS:
$('.nav-tabs > li > a').on('mouseover', function() {
$(this).tab('show');
});
$('.nav-tabs > li > a').on('mouseleave', function() {
// remove active class on the tab panel
$($(this).attr('href')).removeClass('active');
// remove active class on the tab tab
$(this).parent().removeClass('active');
});
Bootply: http://www.bootply.com/vTXnT8VckW
I am learning jquery, and need your help. I want to reduce the number of codes here:
I have three buttons on navbar. cart, .account, .help. If I click on cart, I want to hide dropdown menu for account and help. Same goes for other buttons. Here is the jquery code, I have written so far! Could anyone help me to reduce the number of lines of code?
Jquery Code:
$(".cart").click(function(){
$(".cart .dropdown-menu").show();
$(".account .dropdown-menu").hide();
$(".help .dropdown-menu").hide();
});
$(".account").click(function(){
$(".cart .dropdown-menu").hide();
$(".account .dropdown-menu").show();
$(".help .dropdown-menu").hide();
});
$(".help").click(function(){
$(".cart .dropdown-menu").hide();
$(".account .dropdown-menu").hide();
$(".help .dropdown-menu").show();
});
HTML CODE:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>madison square market</h1>
</div>
<div class="pull-right">
<ul>
<li class="cart dropdown">
<h3>cart ▾</h3>
<ul class="dropdown-menu">
<li>View Cart</li>
<li>Saved Carts</li>
</ul>
</li>
<li class="account dropdown">
<h3>account ▾</h3>
<ul class="dropdown-menu">
<li>View Account</li>
<li>Check Order Status</li>
<li>Sign in</li>
</ul>
</li>
<li class="help dropdown">
<h3>help ▾</h3>
<ul class="dropdown-menu">
<li>FAQs</li>
<li>Return Policy</li>
<li>Shipping Info</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="main">
</div>
<div class="supporting">
<div class="container">
<h2>recent arrivals</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/carrots.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/cauliflower.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/peppers.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="supporting">
<div class="container">
<h2>popular produce</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/potatoes.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/onions.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/tomatoes.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<h3>follow</h3>
<ul>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</div>
</div>
<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
<script src='script.js'></script>
</body>
</html>
Hello You can reduce it like this
$('.dropdown-menu').prev("h3").on("click",function(){
$('.dropdown-menu').hide();
$(this).next(".dropdown-menu").show();
});
I have togglable tabs using Twitter Bootstrap. My problem is that my .tab-content is hidden and I want to show it when the mouse pointer enters the .nav-tabs > li and hide it when the mouse pointer leaves the elements.
Here is my code:
<div role="tabpanel" class="tabpanel">
<div class="container">
<!-- company tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
<a href="#sigma" aria-controls="sigma" role="tab" data-toggle="tab" class="boxopacity">
<span>TAb1</span>
</a>
</li>
<li role="presentation">
<a href="#alpek" aria-controls="alpek" role="tab" data-toggle="tab" class="boxopacity">
<span>TAb2</span>
</a>
</li>
<li role="presentation">
<a href="#nemak" aria-controls="nemak" role="tab" data-toggle="tab" class="boxopacity">
<span>TAb3</span>
</a>
</li>
</ul><!-- .end company tabs -->
<!-- company information -->
<div class="tab-content">
<!-- company sigma -->
<div role="tabpanel" class="tab-pane fade" id="sigma">
<div class="box largebox">
<div class="content">
<h5>Tab1</h5>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Productos principales</h6>
<h6>Mercados</h6>
<ul>
<li>Alimentos</li>
</ul>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Cifras relevantes</h6>
<ul class="relevant">
</ul>
</div>
</div>
<div class="box mediumbox">
</div>
</div>
<!-- company alpek -->
<div role="tabpanel" class="tab-pane fade" id="alpek">
<div class="box largebox">
<div class="content">
<h5>Tab2</h5>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Productos principales</h6>
<h6>Mercados</h6>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Cifras relevantes</h6>
<ul class="relevant">
<li>Plantas</li>
</ul>
</div>
</div>
<div class="box mediumbox">
</div>
</div>
<!-- company nemak -->
<div role="tabpanel" class="tab-pane fade" id="nemak">
<div class="box largebox">
<div class="content">
<h5>Tab3</h5>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Productos principales</h6>
<h6>Mercados</h6>
<ul>
<li>Automortiz.</li>
</ul>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Cifras relevantes</h6>
<ul class="relevant">
</ul>
</div>
</div>
<div class="box mediumbox">
</div>
</div>
</div><!-- .end company information -->
</div>
</div>
My Jquery:
<script>
$(document).ready(function (){
$('.nav-tabs > li > a').hover(function () {
$(this).tab('show');
}, function () {
});
});
</script>
You can do it with mouseenter & mouseleave like this fiddle I've just created:
http://jsfiddle.net/jep0n6p9/3/
jQuery
$( '.nav-tabs' ).mouseenter( handlerIn );
$( '.tab-content' ).mouseleave( handlerOut );
function handlerIn() {
$('.tab-content').show();
}
function handlerOut() {
$('.tab-content').hide();
}
Please use mouseleave event on nav-tab to hide content of tabs.
Please check this link : http://jsfiddle.net/yLq1df22/
Hope this might be helpful to you.
I just used a Bootstrap .nav-tabs which actually makes the tab function of showing/hidding content:
<div class="tabbable">
<ul class="nav nav-tabs">
<li>Perfiles</li>
<li>Mallas</li>
<li>Láminas</li>
<li>Corrugado</li>
<li>Cables</li>
<li>Tecnológico</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab-perfiles">
</div>
<div class="tab-pane" id="tab-mallas">
</div>
</div>
</div>
So clicking at any tab will make the div inside .tab-content being displayed and hiding the rest.
But what about using a .nav-list?
For example, I got:
<ul class="nav nav-list">
<li class="active">Home</li>
<li>Info</li>
<li>Applications</li>
<li>Profile</li>
<li>Team</li>
</ul>
I want it to be able to do the same, I tried using it within a .tabbable and adding a .tab-content below but got not results.
Actually I'd like the .nav-list and its contents to be inside a .tab-content:
<div class="tabbable">
<ul class="nav nav-tabs">
<li>Perfiles</li>
<li>Mallas</li>
<li>Láminas</li>
<li>Corrugado</li>
<li>Cables</li>
<li>Tecnológico</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab-perfiles">
<div class="row tab-categoria-producto">
<div class="col-sm-3">
<ul class="nav nav-list">
<li class="active">Home</li>
<li>Sasha</li>
<li>Applications</li>
<li>Profile</li>
<li>Akira</li>
</ul>
</div>
<div class="col-sm-2">
<div id="sasha">Hola Sasha</div>
</div>
<div class="col-sm-2">
<div id="akira">Hola Akira</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-mallas">
</div>
<div class="tab-pane" id="tab-laminas">
</div>
<div class="tab-pane" id="tab-corrugado">
</div>
<div class="tab-pane" id="tab-cables">
</div>
<div class="tab-pane" id="tab-tecnologico">
</div>
<!-- Fin tab content -->
</div>
</div> <!-- Fin tabbable -->
I include this fiddle
This is possible without your own JS. You just need the correct structure and class names.
Here's your corrected markup:
<!-- Top Tabs -->
<ul class="nav nav-tabs">
<li class="active">Perfiles</li>
<li>Mallas</li>
<li>Láminas</li>
<li>Corrugado</li>
<li>Cables</li>
<li>Tecnológico</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-perfiles">
<div class="container-fluid">
<div class="row tab-categoria-producto">
<!-- Tab 1 navigation -->
<ul class="col-sm-3 nav nav-list">
<li class="active">Sasha</li>
<li>Akira</li>
</ul>
<!-- Tab 1 content -->
<div class="col-sm-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="sasha">Hola Sasha</div>
<div class="tab-pane" id="akira">Hola Akira</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-mallas">Content 2</div>
<div class="tab-pane" id="tab-laminas">Content 3</div>
<div class="tab-pane" id="tab-corrugado">Content 4</div>
<div class="tab-pane" id="tab-cables">Content 5</div>
<div class="tab-pane" id="tab-tecnologico">Content 6</div>
<!-- Fin tab content -->
</div>
Demo
Here's another demo of this that's less busy (it has less tabs and is cleaner as it only uses the necessary classes, rather than the OP's additional ones), in case others want to see it).
Nice clean demo
Take a look at following example, a simple effort from my side. I hope it may work for you:
<div id="rootwizard">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Forth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>