We Keep Coding

Add css style to elements of 2 lists on element click

I have 2 lists of elements. When I click on an element of first list (it is a link), I basically need to add css class 'is-active' to that element AND to corresponding item from another list. I think they have to be in separate lists, as they are in two different bootstrap columns for mobile friendliness. I am currently styling elements from first list with:
$(document).ready(function(){
$('.tabs li').click(function(){
$(this).addClass('is-active');
$('.tabs li').not(this).removeClass('is-active');
});
})
Can't select elements from the other list though.. Any ideas how can I achieve this functionality with css, js/jquery?
My html structure currently is like this:
<div class="col-md-6">
<ul class="tabs">
<li class="tabs-title is-active">
title_1
</li>
<li class="tabs-title">
title_2
</li>
</ul>
</div>
<div class="col-md-6">
<div class="tabs-content">
<div class="tabs-panel is-active">
<div class="entry">
<p>content_1</p>
</div>
</div>
<div class="tabs-panel">
<div class="entry">
<p>content_2</p>
</div>
</div>
</div>
</div>
When I click on 2nd link from first column, the 2nd div from second column should get 'is-active' class. Is this possible?
I guess lists do not have corresponding elements right now. What do I need to have the items linked in some way?

Here's an example, since we don't know what your list looks like.
<ul class="tabs">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ul class="letters">
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ul>
Also, it's easier to remove all instances of the is-active class and then add it just to the target elements.
$(document).ready(function(){
$('.tabs li').click(function(){
var index = $('.tabs li').index(this);
$('.tabs li, .letters li').removeClass('is-active');
$(this).addClass('is-active');
$('.letters li').each(function(i) {
if (i == index)
$(this).addClass('is-active');
})
});
})
https://jsfiddle.net/fzeauw7a/

Need to add Prev/Next toggles to tab script

Here is the JS Fiddle of my existing tab build:
http://jsfiddle.net/getpresto/89ZAG/1/
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
What I need is the ability to add a far left button that will cycle the user to the next tab to the left and a far right button that will cycle the user to the right tab. If the user reaches either end and continues to click the same prev or next option then they will simply continue through to the other end of tabs. So if they are on tab 1 and click the left navigation button then they will go to tab 3 as an example.
How can I adjust this script to include this feature? Thank you for your time.

Basic steps for any version will be:
You need to get the current selected tab index,
alter it with +1 or -1 (depending on the button pressed),
then wrap the value based on the number of tabs,
then update the current tab.
If you can upgrade to JS 1.9.1 or higher something like this will work:
JSFiddle: http://jsfiddle.net/89ZAG/8/
$(document).ready(function () {
var selectTab = function (delta) {
//var index = $("#tabs .current").parent().index();
var index = $("#tabs").tabs('option', 'active');
var count = $("#tabs ul > li").length;
index += delta;
if (index < 0) {
index = count - 1;
}
if (index >= count) {
index = 0;
}
$('#tabs').tabs('option', 'active', index);
};
$("#tabs").tabs();
$('#prev').click(function () {
selectTab(-1);
});
$('#next').click(function () {
selectTab(1);
});
}); //end document ready
But the HTML also needs to be restructured to suit that later tabs requirements (the panel selectors are in the link href properties:
HTML:
<div id="tabs">
<ul class="tabs header">
<li>Tab 1
</li>
<li>Tab 2
</li>
<li>Tab 3
</li>
</ul>
<div class="panes" id="tab1">
<!--Start Tab 1-->Tab 1 content.</div>
<div class="panes" id="tab2">
<!--End Tab 1 & Start Tab 2-->Tab 2 content.</div>
<div class="panes" id="tab3">
<!--End Tab 2 & Start Tab 3-->Tab 3 content.</div>
<!--End Tab 3-->
<!--End Panes-->
</div>
<input class="header" type="button" value="Prev" id="prev" />
<input class="header" type="button" value="Next" id="next" />
You will need to style the two buttons so they appear beside/over your tabs.

How to show the content by tab selection using jQuery?

I want to select the content by selecting the appropriate tab like in this image
In this image there are several tabs named ABOUT, MACHINES, etc. and below this all the contents are layered one upon another. Only the active tab is shown and others are hidden.
I have two problems:
1.whenever I click on a tab,then the selected tab's background color changes.
to perform this task I did this.
$(document).ready(function(){
$('#profiletabs a').click(function() {
$('#profiletabs a.activetab').removeClass('activetab');
$(this).addClass('activetab');
});
});
2.whenever I select a tab then the corresponding content tab is to be shown
Please tell me how to do this?
MENUBAR
<div id="profiletabs">
<ul>
<li >About </li>
<li>Machines</li>
<li>users</li>
<li>Marketing</li>
<li>Charges</li>
<li>Discounts</li>
<li>Timings</li>
<li>Programs</li>
<li>Facilities</li>
<li>Special Programs</li>
<li>Staff</li>
<li>Contact</li>
</ul>
</div>
CONTENT
<div class="content active" style="display: block" id="tab1">
<div class="heading">About</div>
<table class="contenttable">
<tr><td class="lefttd">Address:</td><td class="righttd">CMC mkt. , Near union bank of India , Main dadari road, Noida Sector-49</td></tr>
<tr><td class="lefttd">Location:</td><td class="righttd">Noida.</td></tr>
<tr><td class="lefttd">Landmark:</td><td class="righttd">Near Golfview Hotel.</td></tr>
<tr><td class="lefttd">Area:</td><td class="righttd">200 Sq Fit.</td></tr>
<tr><td class="lefttd">Speciality/UPS:</td><td class="righttd">Group Ex.</td></tr>
<tr><td class="lefttd">Branches in India:</td><td class="righttd">6.</td></tr>
<tr><td class="lefttd">Surrounding:</td><td class="righttd">Abc.</td></tr>
<tr><td class="lefttd">History:</td><td class="righttd">Since 2001</td></tr>
</table>
</div>
and so on for other contents....
To show the content I did this
JQUERY
$(document).ready(function (){
var curnt=1;
function showtab(next)
{
$(".rightcontainer #tab"+curnt).removeClass("active");
$(".rightcontainer #tab"+next).addClass("active");
curnt=next;
}
});
Thank you.

I suggest setting a data value that links the tab to the content div. Then you can inspect that data value and find the content div to show:
$('#tabs li').click(function() {
$('#tabs .active').removeClass('active');
var tab = $(this).addClass('active').data('tab-content');
$('.tab-content.active').removeClass('active');
$('.tab-content[data-tab-content='+tab+']').addClass('active');
});
<ul id="tabs">
<li data-tab-content="tab1">Tab 1</li>
<li data-tab-content="tab2">Tab 2</li>
</ul>
<div class="tab-content" data-tab-content="tab1">My tab 1 content</div>
<div class="tab-content" data-tab-content="tab2">Tab2 content div</div>
http://jsfiddle.net/YevZr/

Show HTML class on first tab when you do not know which tab will display first as it is dependent on whether data exists in that field

I have a web page with tabbed content. The information for each tab is pulled from a database. The tab only displays if content exists. The JS requires class="active" to be set on the first tab to allow it to load and also to change the colour of the tab to show it is the active tab.
The problem I have is that I don't know which tab will be first, as there may not be any information for the first tab, so it will not display and it will be tab 2 or 3 that will show first.
How can I say 'make this tab have class="active" if it is first'?
HTML:
<nav class="filters">
<ul class="tabs">
<li class="active">Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
</ul>
</nav>
<article class="tab-content has-aside wysiwyg active" id="uniquename-tab-1">
<h1>Content 1</h1>
</article>
<article class="tab-content has-aside wysiwyg" id="uniquename-tab-2">
<h1>Content 2</h1>
</article>
<article class="tab-content has-aside wysiwyg" id="uniquename-tab-3">
<h1>Content 3</h1>
</article>
JavaScript:
function tabs($container) {
$container.each(function() {
$('.tabs > li > a', $container).on('click', function(e) {
e.preventDefault();
var tab_id = $(this).attr('data-tab');
$('.tabs > li', $container).removeClass('active');
$('.tab-content', $container).removeClass('active');
$(this).parent().addClass('active');
$("#"+tab_id, $container).addClass('active');
});
});
}

$("ul.tabs li:eq(0)").addClass('active');

I suppose you are using Bootstrap. If so, I had a similar problem and added a call to the tab function, as stated in the usage section of their doc:
$(document).ready(function () {
$(".tabs a:first").tab('show');
}

Show/hide content for menu sublink and close the content when click next new link

I'm looking for a solution, it must work in IE also, that I can have the content hidden and then when you click one of the menu items it shows the content. However, the content doesn't hide until a user clicks on the next link...

Please check this link
http://jsfiddle.net/varada/YLX9x/
you can use jquery hide() and show() functions for that.
Let the id of div that is to be hidden be hidden_div, let menu item be menu_item, next button be next,
Import the jquery.js
and write the ready function as below..
$(document).ready(function() {
$('#menu_item').click(function() {
$('#hidden_div').show();
});
$('#next').click(function() {
$('#hidden_div').hide();
});
});
or if you mean the content be visible till he click the next link on the menu item, add a class name say, menu_class to the menu items and write the code
$('.menu_class').click(function() {
$('#hidden_div').hide();
});
instead of $('#next').click(function()
if you have a menu like
<ul>
<li class='menu_class'>item 1</li>
<li id='menu_item' >item 2</li>
<li class='menu_class'>item 3</li>
</ul>
and the div
<div id='hidde_div' style='display:none'>
content
</div>
then if you click item 2 the div will get displayed. and if you click item 1 or item 3 it will get hidden. make sure you are using the code $('.menu_class').click(function() {

html:
<li class="main">Web
<ul>
<li>Designing</li>
<li>Development</li>
</ul>
</li>
<li class="main">IT
<ul>
<li>Sales & Service</li>
<li>CCTV</li>
<li>DVR</li>
</ul>
</li>
<li class="main">ITES
<ul>
<li>BPO</li>
<li>Online Portal</li>
<li>Online Marketing</li>
</ul>
</li>​
js:
$(document).ready(function(){
$('li ul:not(:first)').hide();
$('ul li').click(function(){
$(this).closest('.main').next().find('ul').show();
$(this).closest('ul').hide();
});
});​
http://jsfiddle.net/7QheB/