We Keep Coding

How to use js/css to make tab content viewable

I am working on tab
There are 5 tabs
About Us
Our Work
Our Team
News & Events
Contact us
and inside each of them there are content and links, images.
What i am trying to achieve here whenever i click the link inside the tab Our Team content,
It should open the Contact us Tab content.
Here is the code i am using currently, It has some custom js and jquery 2.2.0 used.
Please check the code, i haven't put css here.
The live link of this example is Live Demo
Please help me
// TABS
var tabs = $('.container_tabs');
$('.tabs-content > div', tabs).each(function (i) {
if (i != 0) $(this).hide(0);
});
tabs.on('click', '.tabs a', function (e) {
e.preventDefault();
var tabId = $(this).attr('href');
$('.tabs a', tabs).removeClass();
$(this).addClass('active');
$('.tabs-content > div', tabs).hide(0);
$(tabId).show();
});
// var tabs1 = $('.container_tabs1');
// $('.tabs-content > div', tabs1).each(function (i) {
// if (i != 0) $(this).hide(0);
// });
// tabs1.on('click', '.tabs a', function (e) {
//
// e.preventDefault();
//
// var tabId = $(this).attr('href');
//
//
// $('.tabs a', tabs1).removeClass();
// $(this).addClass('active');
//
// $('.tabs-content > div', tabs1).hide(0);
// $(tabId).show();
//
// });
(function ($) {
jQuery.fn.lightTabs = function (options) {
var createTabs = function () {
tabs = this;
i = 0;
showPage = function (tabs, i) {
$(tabs).children("div").children("div").hide();
$(tabs).children("div").children("div").eq(i).show();
$(tabs).children("ul").children("li").removeClass("active");
$(tabs).children("ul").children("li").eq(i).addClass("active");
};
showPage(tabs, 0);
$(tabs).children("ul").children("li").each(function (index, element) {
$(element).attr("data-page", i);
i++;
});
$(tabs).children("ul").children("li").click(function () {
showPage($(this).parent().parent(), parseInt($(this).attr("data-page")));
});
};
return this.each(createTabs);
};
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs cw-wrapper">
<ul class="cw-30">
<li class="" data-page="0">About Us</li>
<li data-page="1">Our Work</li>
<li data-page="2">Our Team</li>
<li data-page="3">Our Partners</li>
<li data-page="4" class="active">Work With Us</li>
<li data-page="5">Contact us</li>
</ul>
<div class="cw-70">
<div class="content" style="display: none;">
Content 1
</div>
<div class="content" style="display: none;">
Content 2
</div>
<div class="content" style="display: none;">
Content 3
</div>
<div class="content" style="display: none;">
Content 4
</div>
<div class="content" style="display: none;">
<h3>Contact us Content</h3>
</div>
</div>
</div>

If I understand you correctly, you want to be able to switch tabs by links that are inside your tab contents too. In that case you should create a function for switching tabs, instead of a click event in you menu. here is an example:
edit #1:
I removed all onclicks and bind switchTab function to all elements that have switch-tab class.
edit #2:
As requested, you can pass initial tab number from url ?tab=x codepen
// set tab from url
// sample url: http://mywebsite.com/my-route?tab=2
$(document).ready(function() {
var url = new URL(window.location.href);
var tabNumber = url.searchParams.get('tab');
if (tabNumber)
switchTab(tabNumber);
});
// change tab by clicking an element with "switch-tab" class
$('.switch-tab').on('click', function(e) {
var tabNumber = e.target.getAttribute('data-tab');
switchTab(tabNumber);
});
// change tab by passing tab number
function switchTab(tabNumber) {
$('#tabs li').removeClass('active');
$('#tabs li[data-tab=' + tabNumber + ']').addClass('active');
$('.content').css('display', 'none');
$('.content[data-content=' + tabNumber + ']').css('display', 'block');
}
<style>
#tabs li.active {
font-weight: bold;
}
.content {
display: none;
}
.content.visible {
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs cw-wrapper">
<ul class="cw-30" id="tabs">
<li data-tab="0" class="switch-tab">About Us</li>
<li data-tab="1" class="switch-tab">Our Work</li>
<li data-tab="2" class="switch-tab">Our Team</li>
<li data-tab="3" class="switch-tab">Our Partners</li>
<li data-tab="4" class="switch-tab active">Work With Us</li>
<li data-tab="5" class="switch-tab">Contact us</li>
</ul>
<div class="cw-70">
<div class="content" data-content="1">
<p>Content 1</p>
</div>
<div class="content" data-content="2">
<p>Content 2</p>
</div>
<div class="content" data-content="3">
<p>Content 3</p>
</div>
<div class="content visible" data-content="4">
<p>Content 4</p>
go to contact us
</div>
<div class="content" data-content="5">
<h3>Contact us Content</h3>
</div>
</div>
</div>

toggleclass active doesn't work properly

I want the menu to work like this. When you click Main1 it becomes active and the list will show, when you click it again the list will hide. When Main1 is active and you click Main2, then the Main1 should be inactive and Main2 active.
But my Javascript doesn't seem to make it work well. It makes the Main1 inactive when you click Main2 and the other way, but if you click on any of the active Main it doesn't become incactive. Please help
<div class="directory-section-list">
<ul class="list_item">
<li class="li_lvl lvl0" id="bx_1847241719_2">Main1</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul>
<ul class="list_item">
<li class="li_lvl lvl0" id="bx_1847241719_2">Main2</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul >
</div>
Javascript
$(' .list_item .lvl0').click(function(){
$(".list_item.active").removeClass("active");
$(this).parent().toggleClass('active');
});
$(' .list_item .lvl1').click(function(){
$(this).parent().toggleClass('active');
});

Try this,
$('.list_item .lvl0').click(function(){
$('.directory-section-list .active').removeClass('active');
if ($(this).parent().hasClass('active'))
{
$(this).parent().removeClass('active');
}
else
{
$(this).parent().addClass('active');
}
});
$('.list_item .lvl1').click(function(){
$(this).parent().toggleClass('active');
});

Please try this
HTML
<div class="directory-section-list">
<ul class="list_item">
<li class="li_lvl lvl0" id="bx_1847241719_2">Main1</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul>
</ul>
<ul class="list_item">
<li class="li_lvl lvl1" id="bx_1847241719_2">Main2</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul>
</ul>
</div>
Java Script
$(' .list_item .lvl0').click(function () {
$(' .list_item .lvl1').parent().removeClass("active");
$(this).parent().toggleClass('active');
});
$(' .list_item .lvl1').click(function () {
$(' .list_item .lvl0').parent().removeClass("active");
$(this).parent().toggleClass('active');
});

Sorry but your HTML List had a couple of errors the
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
will never be closed...
its all about the HTML Structure - i've done another change -> check the HTML Structure of this JS Fiddle: http://jsfiddle.net/marco_rensch/hzu76hgt/32/

I think you want something like this?
$(document).ready(function(){
$('.maindiv').hide();
$( "button" ).click(function() {
$('.maindiv[data-link=' + $(this).data('link') + ']').toggle("fade",300);
});
});
div {
background-color: green;
color: white;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button class="show" data-link="main1">Main1</button>
<button class="show" data-link="main2">Main2</button>
<div>
<div class="maindiv" data-link="main1">
<h1>This is main1</h1>
</div>
<div class="maindiv" data-link="main2">
<h1>This is main2</h1>
</div>
</div>

Well Thank you all for your help. I managed to do it taking some of your examples and making it work my own way. Thank you again. I will post the Javascript fix.
$(document).ready(function() {
$('.li_lvl').click(function () {
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
}
else {
$('.directory-section-list .active').removeClass('active');
$(this).parent().addClass('active');
}
});
This will toggle class active of the parent .li_lvl which is the ul.list_item. If parent has class active it will remove class active. If any other list_item will have class active whilst you click on the other list_item, it will remove class active on the other list_item and make class active on the list_item you clicked.

How do I hide a div that has a ul with a certain id using jQuery?

I am trying to hide any <div>'s that do not have a <ul> with a certain id. I have a fiddle where I am trying this but it isn't working the way I expected. I can get all of them to hide but the one I want to continue showing isn't working.
HTML
<ul id="accordion">
<li>
<div style="background-color: rgb(109, 129, 27);" class="expand" title="Click to Expand">Zoos</div>
<ul class="sortCat1" id="zoo">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
</li>
<li>
<div style="background-color: rgb(109, 129, 27);" title="Click to Expand" class="expand">Attractions</div>
<ul class="sortCat2" id="attractions">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
</li>
<li>
<div style="background-color: rgb(109, 129, 27);" title="Click to Expand" class="expand">Dining & Shopping</div>
<ul class="sortCat3" id="dinShop">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
</li>
</ul>
Javascript
if($('.expand ul').id == 'attractions'){
$(this).css({'display': 'block'});
}else{
$('.expand').css({'display': 'none'});
}
JSFiddle
http://jsfiddle.net/27Wmm/

Discussions of the non-merits of numeric ids aside...
Reading between the lines I think you wanted something like this (toggles open the UL associated with a labelled div):
JSFiddle: http://jsfiddle.net/TrueBlueAussie/27Wmm/1/
$(function () {
$('#accordion').on('click', '.expand', function () {
var $this = $(this);
// Show the sibling of the clicked div
$this.next().css({
'display': 'inherit'
});
// Now hide all others sibling of the non-clicked divs
$('.expand').not($this).next().css({
'display': 'none'
});
});
});
With any type of menu, you would normally want to avoid any hard-coding of selections and have it operate on the item clicked (and other related items not clicked).
You would also probably want to start only one (if any) not-collapsed which just means an initial style on them. e.g. in CSS
#accordion ul {
display: none;
}
JSFiddle: http://jsfiddle.net/TrueBlueAussie/27Wmm/3/
Update
If you want it to have specific startup behaviour, you can factor out the bit that does the work and call it on startup as well.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/27Wmm/4/
var showThis = function ($this) {
// Show the sibling of the clicked div
$this.next().css({
'display': 'inherit'
});
// Now hide all others
$('.expand').not($this).next().css({
'display': 'none'
});
}
$(function () {
$('#accordion').on('click', '.expand', function () {
showThis($(this));
});
showThis($('#attractions').prev());
});
Yet another update
According to the comments, the desired behaviour is to simply show the attraction DIV and associated UL. If that were the case (I still have my doubts) you would change the above to this:
var showThis = function ($this) {
// Show the div, then show the sibling of the clicked div
$this.css({
'display': 'inherit'
}).next().css({
'display': 'inherit'
});
// Now hide all other divs and ULs
$('.expand').not($this).css({
'display': 'none'
}).next().css({
'display': 'none'
});
}
$(function () {
showThis($('#attractions').prev());
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/27Wmm/5/
This should be plenty to play with.

I'm not sure how you're expecting it to work, but I modified your HTML and JS to get something that I think works how you want:
<ul id="accordion">
<li>
<div style="background-color: rgb(109, 129, 27);" class="expand" title="Click to Expand">Zoos
<ul class="sortCat1" id="zoo">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
</div>
</li>
<li>
<div style="background-color: rgb(109, 129, 27);" title="Click to Expand" class="expand">Attractions
<ul class="sortCat2" id="attractions">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
</div>
</li>
<li>
<div style="background-color: rgb(109, 129, 27);" title="Click to Expand" class="expand">Dining & Shopping
<ul class="sortCat3" id="dinShop">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
</div>
</li>
$(".expand").each(function()
{
if($('ul', this).attr('id') != "attractions")
{
$(this).css({'display': 'none'});
}
});

Try something like this:
if($('.sortCat2').attr('id') == 'attractions'){
$('.sortCat2').css({'display': 'none'});
}
Working fiddle: http://jsfiddle.net/robertrozas/27Wmm/2/

I have made an accordian menu but the links which have no submenus do not work

I have made an accordian menu and mostly everything is working grand. the submenu links are working and the sliding is grand. The thing is, the links which do not have submenus are not working. I have a js file which has the following snippet of code:
$(document).ready(function(){
$("#nav > li > a").on("click", function(e){
e.preventDefault();
}
if(!$(this).hasClass("open")) {
// hide any open menus and remove all other classes
// open our new menu and add the open class
$(this).next("ul").slideDown(350);
$(this).addClass("open");
}
else if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).next("ul").slideUp(350);
}
});
});
As you can see at the top it states that if the parent of a has another child ul then prevent that link a from opening, which works fine for the links which have submenus. However you would think this would still enable the links with no 'ul' sibling to work, but they don't work. For example the 'call us' does not go to the specified page "open.htm". I appreciate any help. Thank you. My html:
<div id="content">
<div>
<ul id="nav">
<li><span class="block1"><img class="navicon" src="images/maps_30_white1.png" height="30" width="30" alt="Find Us" /><span class="button_desc">Find Us</span></span></li>
<li>Call Us</li>
<li><span class="block1"><img class="navicon" src="images/clock_white1.png" height="30" width="30" alt="Opening Hours" /><span class="button_desc">Opening Hours</span></span></li>
<li><span class="block1"><img class="navicon" src="images/arrow_white.png" height="30" width="30" alt="Shop" /><span class="button_desc">Departments</span></span>
<ul>
<li><h4>Cartoons</h4></li>
<li><h4>Comic Strips</h4></li>
<li><h4>Video Clips</h4></li>
<li><h4>Web GIFs</h4></li>
</ul>
</li>
<li><span class="block1"><img class="navicon" src="images/arrow_white.png" height="30" width="30" alt="Shop" /><span class="button_desc">Brands</span></span>
<ul>
<li><h4>Adobe Photoshop</h4></li>
<li><h4>Branding & Logos</h4></li>
</ul>
</li>
<li><span class="block1"><img class="navicon" src="images/arrow_white.png" height="30" width="30" alt="Shop" /><span class="button_desc">Gift Ideas</span></span>
<ul>
<li><h4>Adobe Photoshop</h4></li>
<li><h4>Branding & Logos</h4></li>
<li><h4>Digital Marketing</h4></li>
</ul>
</li>
</ul>
</div>
</div>

Firstly, if the text represents a sub menu (example: Brand), why is it in an anchor tag? If you want to show an image and some text, you can do that using css or img tag.
Remove for UL headers.
Second, you need to remove e.preventDefault(). This is the reason why your single links are not going to the next page.
Sample HTML:
<div id="content">
<div>
<ul id="nav">
<li>Call Us
</li>
<li><span class="block open">List Header</span>
<ul>
<li>List item 1</li>
<li>List item ...</li>
<li>List item n</li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
.block {
text-decoration: underline;
}
Your fixed JS:
$(document).ready(function () {
$("#nav > li > .block").on("click", function (e) {
if (!$(this).hasClass("open")) {
// hide any open menus and remove all other classes
// open our new menu and add the open class
$(this).next("ul").slideDown(350);
$(this).addClass("open");
} else if ($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).next("ul").slideUp(350);
}
});
});
Live demo/fiddle:
http://jsfiddle.net/tRDzr/1/

How to close all elements that are opened with jquery? (Behavior similar to the accordion menu)

I have this html code:
<div id="menu">
<ul id="menuFuncionalidades">
<li>
<div class="menuFuncionalidades_categoria">
Index</div>
</li>
<li>
<div class="menuFuncionalidades_categoria">
Cadastros</div>
<div class="menuFuncionalidades_content_links">
<div class="menuFuncionalidades_content_links_descricao">
<span class="menuFuncionalidades_content_links_descricao_titulo">Descrição</span>
<div class="menuFuncionalidades_content_links_descricao_texto">
Lorem Ipsum...
</div>
</div>
<div class="menuFuncionalidades_content_links_links">
<ul><b>Acesso Usuario</b>
<li>Pesquisar </li>
<li>Incluir </li>
<li>Alterar </li>
<li>Consultar </li>
</ul>
<ul><b>Produto</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
<ul><b>Perfil</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
</div>
</div>
</li>
<li>
<div class="menuFuncionalidades_categoria">
Coletores</div>
<div class="menuFuncionalidades_content_links">
<div class="menuFuncionalidades_content_links_descricao">
<span class="menuFuncionalidades_content_links_descricao_titulo">Descrição</span>
<div class="menuFuncionalidades_content_links_descricao_texto">
Lorem Ipsum...
</div>
</div>
<div class="menuFuncionalidades_content_links_links">
<ul>
<b>Coletor 1</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
<ul>
<b>Coletor 2</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
<ul>
<b>Coletor 3</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
</div>
</div>
</li>
</ul>
</div>
My objective is when i click in a menuFuncionalidades_categoria i close all menuFuncionalidades_content_links that is opened, and opened the right one that is in the same level of the menuFuncionalidades_categoria that i click. So, i try this, but i have no success:
$(document).ready(function () {
$('#menuFuncionalidades > li > .menuFuncionalidades_categoria').click(function () {
$("#menu").children().find('.menuFuncionalidades_content_links').each(function () {
// I need a code here to close only the tags that are opened but is not the current
if ($(this).css('display') == 'block') {
$(this).hide();
}
});
$(this).parent().find('.menuFuncionalidades_content_links').slideToggle('normal').css('width', $('#menu').css('width'));
});
});
What am i missing or doing wrong?
OBS: The behavior that i want, is similar with accordion menu.
DEMO here: http://fiddle.jshell.net/ry9dz/1/

As #karim79 says, you can't check "display" that way - it's a css attribute, not an html attribute.
On the other hand, if you want to close all other entries, then just do that - no need to check if they are visible first! I also suggest you use a more efficient event handler for all your items, instead of binding it to all of them. Using jQuery 1.7, something like this would work:
$(document).ready(function () {
$("#menuFuncionalidades").on("click", ".menuFuncionalidades_categoria", function(event) {
var selectedMenu = $(event.target).parents("li").find(".menuFuncionalidades_content_links")
, visible = selectedMenu.is(":visible");
// Hide all others
$("#menuFuncionalidades .menuFuncionalidades_content_links").hide();
// Show this one unless it was already visible
if(!visible) {
selectedMenu
.slideToggle('normal')
.css('width', $('#menu').css('width'));
}
// Prevent the default action
event.preventDefault();
});
});

You can hide multiple elements without iterating though all of them to see which ones aren't hidden.
Replace;
$("#menu").children().find('.menuFuncionalidades_content_links').each(function () {
if ($(this).attr('display') == 'block') {
$(this).hide();
}
});
with;
$("#menu").find('.menuFuncionalidades_content_links').hide();
$(this).attr('display') is invalid as there are no "display" attribute and instead of using .css('display') == 'block' you could simply use the psuedo selector :visible.

You want the display css property:
if ($(this).css('display') == 'block') {
$(this).hide();
}
or:
if ($(this).is(':visible')) {
$(this).hide();
}