We Keep Coding

two tab switching in one page not working

I want to create two tab switching independent to each other in one page. This code here only allows tab switching one at a time and the content of the other tab that is not active is hidden.
HTML:
//FIRST TAB
<ul id="tab">
<li>OPTION 1</li>
<li class="select">OPTION 2</li>
</ul>
<div class="content_wrap disnon">
<p>●●●●●111</p>
<p>●●●●●222</p>
</div>
<div class="content_wrap">
<p>●●●●●111</p>
<p>●●●●●222</p>
<p>●●●●●333</p>
</div>
//SECOND
<ul id="tab">
<li class="select">OPTION A</li>
<li>OPTION B</li>
</ul>
<div class="content_wrap">
<p>●●●●●AAA</p>
<p>●●●●●BBB</p>
<p>●●●●●CCC</p>
<p>●●●●●DDD</p>
</div>
<div class="content_wrap disnon">
<p>●●●●●AAA</p>
<p>●●●●●BBB</p>
</div>
JScript:
$(function() {
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").addClass('disnon');
$(".content_wrap").eq(num).removeClass('disnon');
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});

There are a few things to check here first.
Both of these tabs have the same id. ID's are supposed to be unique, say tab1 and tab2.
It would be better if you could show us the css of this file.
However if my assumption is correct that
tab1 -> click -> show tab1 content AND
tab2 -> click -> show tab2 content.
The code is as follows.
// USING EITHER HTML5 DATA TAGS OR INDIVIDUAL ID'S
<ul class="tab" data-tab="1"> ... </ul>
<ul class="tab" data-tab="2"> ... </ul>
<div id="tabContent1" class="tabContent"></div>
<div id="tabContent2" class="tabContent" style="display:none"></div>
// SET NOT TO DISPLAY WHEN FIRST ACTIVE
<script>
$('.tab').on('click',function() {
// SELECT CLICKED TAB'S DATA (ie 1 / 2) IN THIS CASE
var tab = $(this).data('tab');
// HIDE ALL OTHER tabContent
$('.tabContent').hide();
// SHOW ONE TAB
$('#tabContent' + tab).show();
});
This has been simplified to easily be expandable for more than one tab. Simply adding more uls & divs will easily create a tab switching layout.

Hiding controls and show next control after click and increment a counter

I have multiple controls in HTML. They consist of li and buttons and so on.
Initially I want to display first control, then after selection of the item, I get the value and then I get the other control which is button, after click, I get another button and so on.
I also have a span class that increments with the number of steps completed as follows:
<span id="step-count">1</span>
<ul id="user">
<li class="mdl-menu__item">User 1</li>
<li class="mdl-menu__item">User 2</li>
<li class="mdl-menu__item">User 3</li>
</ul>
<!-- Step 2 -->
<button id="cost">Add cost</button>
<!-- Step 3 -->
<button id="work">Create a work</button>
Basically what I have done is the following:
$(function() {
var count = 1;
$('#cost').hide();
$("#work").hide();
$("#step-count").text(count);
$("#user li").click(function() {
console.log('I am in..');
var $this = $(this);
alert($this.text());
$('#user').hide();
count++;
$('#cost').show();
$("#step-count").text(count);
});
$("#cost").click(function() {
console.log("Costing menu in..");
$("#cost").hide();
count++;
$("#work").show();
$("#step-count").text(count);
});
});
Could someone advise me on a better way of doing this, suppose if I have 30 different controls, I cannot each time on click, hide the previous control and show the next one.
Edited Part for li
<div id="steps">
<button class="mdl-button mdl-js-button user-menu mdl-button--raised mdl-js-ripple-effect">
Add User
</button>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu js-user-menu mdl-js-ripple-effect" for="user-menu">
<li class="mdl-menu__item">User 1</li>
<li class="mdl-menu__item">User 2</li>
<li class="mdl-menu__item">User 3</li>
<li class="mdl-menu__item">User 4</li>
<li class="mdl-menu__item">User 5</li>
</ul>
Basically, the above is showing a button, and when I click on the button, it gives me a drop down list where I can select an item. After I select an item, it disappears without showing the next component. Could you please help on this?

You can have Common class on any step element. then when 1 is clicked, you can determine by some attribute what is current step, then determine who is next one.
Html :
1
<ul id="">
<li class="mdl-menu__item step" attr-step="1">User 1</li>
<li class="mdl-menu__item step" attr-step="1">User 2</li>
<li class="mdl-menu__item step" attr-step="1">User 3</li>
</ul>
<!-- Step 2 -->
<button class="step" attr-step="2">
Add cost
</button>
<!-- Step 3 -->
<button class="step" attr-step="3">
Create a work
</button>
<button class="step" attr-step="4"> Create foo </button>
<button class="step" attr-step="5"> Create bar </button>
Javascript
$(function () {
$counter = $('#step-count');
$allStep = $('.step');
var counter = 1;
$allStep.hide();
$('.step[attr-step="'+counter+'"]').show();
$allStep.on('click',function() {
//Get current step number.
counter = parseInt($(this).attr('attr-step'));
counter++;
//Inc and update UI
$counter.text(counter);
$allStep.hide(); //Hide all
$('.step[attr-step="'+counter+'"]').show(); // Display only current.
});
});
Attached Online sample : https://jsfiddle.net/j5ce2hah/16/
---- update with specific traitment on each step ----
You have now payloads object who return instance of jquery ajax object. and base on done promise, we update view and go to next step.
More info for jquery ajax request : http://api.jquery.com/jquery.getjson/
$(function () {
var payloads = {
getUser : function($step) {
return $.getJSON( "/echo/json/",{'id': $step.attr('attr-user-id')}, function() {});
},
getCost : function($step) {
return $.getJSON( "/echo/json/", function() {});
},
getWork : function($step) {
return $.getJSON( "/echo/json/", function() {});
},
};
/**
Init app
**/
$counter = $('#step-count');
$allStep = $('.step');
var counter = 1;
$allStep.hide();
$('.step[attr-step="'+counter+'"]').show();
//Step click handler
$allStep.on('click',function() {
//Get current step number.
counter = parseInt($(this).attr('attr-step'));
//Get whitch payload you want to run.
var payload = $(this).attr('attr-payload');
//When payload answer done,
payloads[payload]($(this)).done(function(data) {
//Do what ever you want with answer.
console.log(data);
counter++;
//Increment and update UI
$counter.text(counter);
$allStep.hide(); //Hide all
$('.step[attr-step="'+counter+'"]').show(); // Display only current.
});
});
});
Online sample : https://jsfiddle.net/j5ce2hah/28/

You can enclose all your steps in a parent <div id="steps"> and use the parent to select all its children, hide them at the beginning, and attach an event listener to them. You can move from one child to another by using this for the current child and next() for the next one. Check next.length to see if you reached the last step.
EDIT If you to call a different function for each step, create these functions with the same name with the step number at the end (example doJob1, doJob2, doJob3). This way you can call them using the window object.
$(function() {
var count = 1;
var steps = $('#steps > *');
steps.hide();
$('#user').show();
$("#step-count").text(count);
steps.click(function() {
window["doJob" + count]();
var current = $(this);
var next = current.next();
if (next.length > 0) {
current.hide();
next.show();
count++;
$("#step-count").text(count);
}
});
});
function doJob1() {
console.log("step 1");
}
function doJob2() {
console.log("step 2");
}
function doJob3() {
console.log("step 3");
}
function doJob4() {
console.log("step 4");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="step-count">1</span>
<div id="steps">
<button id="user" class="mdl-button mdl-js-button user-menu mdl-button--raised mdl-js-ripple-effect">Add User</button>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu js-user-menu mdl-js-ripple-effect" for="user-menu">
<li class="mdl-menu__item">User 1</li>
<li class="mdl-menu__item">User 2</li>
<li class="mdl-menu__item">User 3</li>
<li class="mdl-menu__item">User 4</li>
<li class="mdl-menu__item">User 5</li>
</ul>
<!-- Step 2 -->
<button id="cost">Add cost</button>
<!-- Step 3 -->
<button id="work">Create a work</button>
</div>

How to hide the previous li tag in jquery

I am working on a project in which I have a ul tag with 5 li.
What I want to do is that I want to show each Items one by one on the click of a button. Means as I click the button then the next item should be displayd and the previous one should be hide. as generally happens in quizes.
When We click the next button, the next question appears and the previous one hides.
I am using the following html code :
<div class="span12" style="margin-top:140px;">
<ul id="part">
<li id="div0" style="display:none;">Question id</li>
<li id="div1" style="display:none;">Question 2</li>
<li id="div3" style="display:none;">Question 3</li>
<li id="div4" style="display:none;">Question 4</li>
<li id="div5" style="display:none;">Question 5</li>
</ul>
<button id="next">Next</button>
</div>
and the jquery code is :
<script>
$(function(){
var items = $('ul#part li');
if(items.filter(':visible').length == 0)
{
items.first().show();
}
$('#next').click(function(e){
e.preventDefault();
items.filter(':visible:last').next().show();
});
});
</script>
It is showing the next items from ul on button click but I am unable to hide the previous button.
How can I hide the previous li button as I click on next.
Please help me

This should work
<script>
$(function(){
var items = $('ul#part li');
if(items.filter(':visible').length == 0){
items.first().show();
}
$('#next').click(function(e){
e.preventDefault();
var active = items.filter(':visible:last');
active.hide();
var next = active.next();
if (next.length)
next.show();
});
});
</script>
To check if next exists you should check the length.

Working on Arek's answer, change the if condition to
if (next.length) {
next.show();
} else {
$('#next').html("Submit");
}
so that the button is changed to submit.
Demo Fiddle

Var index=0;/*this should be global variable*/
('#next').click(function(e){
e.preventDefault();
items.hide();
items[index].show();
index==items.length-1?index=0:index++;
});

how to find current active tab id

I want to create functionality for save the current tab on postabck.
for this reason:
1) How to find out the id of current tab.
2) How can pass that id to hidden variable.
I am not using jquery tabs due to some issue. I am creating script using plain jquery script.
This is my JS
$(document).ready(function () {
$('ul.tabs').each(function () {
var $a, $c, $ = $(this).find('a');
$a = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
$a.addClass('active');
This is HTML for tabs
<div class="co">
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1"> Content 1 </div>
<div id="tabs-2"> Content 2 </div>
<div id="tabs-3"> Content 3 </div>
</div>

If you are using jQuery UI tabs, easiest way
As Docs getter of active JqueryUI tab is
var active = $(".tabs").tabs( "option", "active" );

jQuery: random active tab?

I need to have a tab interface that has a different "active" tab every time the page loads. There will be advertiser content in each of the 4 tabs, so this is a way to keep things "fair". I am familiar with the tabs part...just need pointed in the right direction getting different "active" tabs to display on page load.
Thanks!

Just use a javascript random object.
var randomnumber=Math.floor(Math.random()*3) //0-3
Then set the id of each tab to be based off of that random number. So if the random number generates a 1, then show tab 2 as the active tab.

GREAT! I got it down to 3 lines! Thanks #Bryan Denny and #GeReV!
JS/jQuery Code:
// Count the number of tabs
var countTabs = $('.tab_randomiza').children().size();
// Find a random number between 0 and the number of tabs (countTabs)
var randomizeIt = Math.floor(Math.random()*(countTabs));
// Tell the tabs which one to be active
$('#randomiza_wrapper').tabs({ selected: randomizeIt });
HTML:
<div class="titlebar titlebar_secondary">
<h3>Test Bucket</h3>
</div><!-- end .titlebar_secondary -->
<div id="randomiza_wrapper">
<ul class="tab_header tab_randomiza">
<li class="randomiza-tab1 ui-tabs-selected">one</li>
<li class="randomiza-tab2">two</li>
<li class="randomiza-tab3">three</li>
<li class="randomiza-tab4">four</li>
</ul>
<div id="one" class="bucket_secondary randomiza_bucket1">
<ul class="story_list sidebar_story_list">
<li>
Content One
</li>
</ul>
</div><!-- end #one -->
<div id="two" class="bucket_secondary preventFOUC randomiza_bucket2">
<ul class="story_list sidebar_story_list ">
<li>
Content Two
</li>
</ul>
</div><!-- end #two -->
<div id="three" class="bucket_secondary preventFOUC randomiza_bucket3">
<ul class="story_list sidebar_story_list ">
<li>
Content Three
</li>
</ul>
</div><!-- end #three -->
<div id="four" class="bucket_secondary preventFOUC randomiza_bucket4">
<ul class="story_list sidebar_story_list ">
<li>
Content Four
</li>
</ul>
</div><!-- end #four -->
</div>
</div><!-- end #top_jobs -->

Not that familiar with the tabs yet, but you can count items from Javascript and then select one item by random using Javascript's
var randomnumber=Math.floor(Math.random()*tabCount);
and then use the randomnumber as "tab index".

You could let the SERVER which generates the actual content add a "selected default" to the tab in the rendered HTML output.

Using Bryan Denny's answer, here is my almost final code:
// Make sure none of the tabs are active
$('.randomiza-tab1').removeClass('ui-tabs-selected');
$('.randomiza-tab2').removeClass('ui-tabs-selected');
$('.randomiza-tab3').removeClass('ui-tabs-selected');
$('.randomiza-tab4').removeClass('ui-tabs-selected');
// Make sure none of the content is active
$('.randomiza-bucket1').addClass('ui-tabs-hide');
$('.randomiza-bucket2').addClass('ui-tabs-hide');
$('.randomiza-bucket3').addClass('ui-tabs-hide');
$('.randomiza-bucket4').addClass('ui-tabs-hide');
// Find a random number between 0 and 3
var randomnumber=Math.floor(Math.random()*4);
// Add and remove the correct style classes based on random number
switch (randomnumber) {
case 0 :
$('.randomiza-tab1').removeClass('hidden').addClass('ui-tabs-selected');
$('.randomiza-bucket1').removeClass('ui-tabs-hide');
break;
case 1 :
$('.randomiza-tab2').removeClass('hidden').addClass('ui-tabs-selected');
$('.randomiza-bucket2').removeClass('ui-tabs-hide');
break;
case 2 :
$('.randomiza-tab3').removeClass('hidden').addClass('ui-tabs-selected');
$('.randomiza-bucket3').removeClass('ui-tabs-hide');
break;
case 3 :
$('.randomiza-tab4').removeClass('hidden').addClass('ui-tabs-selected');
$('.randomiza-bucket4').removeClass('ui-tabs-hide');
break;
default :
$('.randomiza-tab1').removeClass('hidden').addClass('ui-tabs-selected');
$('.randomiza-bucket1').removeClass('ui-tabs-hide');
}