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.

parent div and child div stays when clicked hides when body is clicked

html
<div class="parent opt">
<div class="child opt" id="1">
<li>options 1</li>
<li>options 2</li>
</div>
</div>
<div class="parent opt">
<div class="child opt" id="2">
<li>options 1</li>
<li>options 2</li>
</div>
</div>
jquery
function toggleDiv() {
var id = $(this).children().attr('id');
$(".dropdown-options").hide();
$("#"+id).toggle();
}
$('.parent').click(toggleDiv);
my aim is to click on the body of the page and the divs disappear, so i tried this.
$("body").click(function (e)
{
var container = $(".opt");
if(e.target.className!=container.attr("class")){
toggleDiv().hide();
}
});
setback:: when i click on child div to choose an option, it disappear, how do i get it to stay so that i can choose an option. Please help

Sweet way...
$(document).ready(function(){
var flag=true;
$(".parent").click(function(){
flag=false;
});
$("body").click(function(){
if(flag) $(".parent").hide();
flag = true;
});
});
That's a pretty messy code of yours. Hiding the parent div will also hide the child div.

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.

jQuery: Delay showing of a dropdown menu content

I have built a dropdown menu that works fine. It goes like this:
Main menu items are in horizontal bar, then
When hover on any item, big dropdown box (with submenu links) is shown.
And here is my code for this:
HTML:
<!-- Based on Bootstrap -->
<div class="navbar navbar-inverse">
<div class="nav-collapse collapse">
<ul class="nav">
<li>First item
<div id="about-horizontal-submenu" class="horizontal-submenu">
<div class="submenu-container span3">
<ul>
<li>Links</li>
<li>Links</li>
</ul>
</div>
<!-- and 4x similar div (to have 12 cols) -->
</div>
</li>
<li>Dropdown
<div id="about-horizontal-submenu" class="horizontal-submenu">
<!-- 3x similar div (like above) and then: -->
<div class="submenu-container span3">
<ul>
<li>I want to go here</li>
<li>Links</li>
</ul>
</div>
</div>
</li>
<!-- And then goes another main menu item... -->
</ul>
</div>
</div>
</div>
JS:
jQuery(document).ready(function($) {
'use strict';
$('.navbar .nav > li').hover(function() {
var $el = $(this);
$el.addClass('hover');
var $submenu = $el.find('.horizontal-submenu');
if ($submenu.is(':hidden')) {
$submenu.slideDown(200);
}
}, function() {
var $el = $(this);
$el.removeClass('hover');
var $submenu = $el.find('.horizontal-submenu');
if ($submenu.is(':visible')) {
$submenu.hide();
}
});
});
Problem
I think I need to add a little delay before both - sliding Down submenu on very first hover and - changing submenu content (when switching/hovering to another menu item).
Why?
When you hover on "Dropdown" and want to choose "I want to move here":
You have to go down from "Dropdown" item and then to the right - which is ok (but not very usable).
Problem is, when you go like the image is showing (from the "Dropdown" straight to the "I want to move here" - you catch "Third item" on your way and immidiatelly see the content that belongs to "Third item". And that's not very good.
If you could show me how to delay/ignore hover on my menu items for very short time, I would be grateful. (I found great example behavior of menu on: http://FEI.com)

Ben Kamens from Khan Academy wrote an article regarding this exact problem, outlining how Amazon.com solved it. It is a great read!
http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
He also put together a jQuery plugin to solve this problem with a working demo. You can find it on GitHub here:
https://github.com/kamens/jQuery-menu-aim
http://htmlpreview.github.io/?https://github.com/kamens/jQuery-menu-aim/blob/master/example/example.html

$(function($) {
var m;
var timer="";
var wait=200;
active=function(){
$('.navbar .nav > li').mouseover(function() {
m = $(this);
if(timer==""){
test();
unb();
timer = setTimeout(reb,wait);
}
});
}
test = function(){
$(".horizontal-submenu").stop().hide(300);
m.find(".horizontal-submenu").stop().show(300);
};
unb = function(){
$('.navbar .nav > li').unbind('mouseover');
};
reb = function(){
timer="";
active();
};
$(".horizontal-submenu").hide(300);
active();
});
Adjust 'wait' for your best timing; You can just copy and try on your script.

This might be what you are looking for:-
http://cherne.net/brian/resources/jquery.hoverIntent.html
From this you need 2 lines on your web page to activate the hover to working properly
1) Loading script hoverIntent
2) Change from hover to hoverIntent in your jQuery

please try setTimeout. It always does the trick.

Controlling visibility of 2 divs simultaneously

I'm trying to use a tabbed interface to display content on a website. The first set of divs is the content (text) and the second is an associated image in a div outside the div containing the text as follows:
<div id="side-img-container">
<div class="side-img" id="image_1"><img src="image1.jpg" /></div>
<div class="side-img" id="image_2"><img src="image2.jpg" /></div>
<div class="side-img" id="image_3"><img src="image3.jpg" /></div>
<div class="side-img" id="image_4"><img src="image4.jpg" /></div>
<div class="side-img" id="image_5"><img src="image5.jpg" /></div>
</div>
<div id="content>
<ul class="tabs">
<li>Tab 1</div>
<li>Tab 2</div>
<li>Tab 3</div>
<li>Tab 4</div>
<li>Tab 5</div>
</ul>
<div class="tab_container">
<div class="tab_content" id="tab_1">Content 1</div>
<div class="tab_content" id="tab_2">Content 2</div>
<div class="tab_content" id="tab_3">Content 3</div>
<div class="tab_content" id="tab_4">Content 4</div>
<div class="tab_content" id="tab_5">Content 5</div>
</div>
</div>
This uses the following Jquery to make the tabs work:
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
Is there any way the above javascript can be added to/adapted so that the corresponding image tab is displayed when a content tab is displayed ie: tab_1 and image_1 etc. ?

First of all, your HTML is invalid - you're closing <li> list items with </div> tags. You've also forgotten to close the quote surrounding the #content element's id attribute value.
The original JavaScript code isn't particularly efficient, so we might as well rewrite it. Using this code, you do not need each of the tab content to have a class attribute, which certainly lightens up the HTML quite a bit:
// Select all of the tab contents, then hide them
// Cache elements that need to be reused
var tabContents = $(".tab_container, #side-img-container").children().hide(),
tabs = $("ul.tabs li");
// Show the first tab's content, and add in the active class
tabs.first().addClass("active");
tabContents.filter(':first-child').show();
// Attach click event handler
tabs.click(function() {
// Cache the clicked on tab element
var $this = $(this),
// Obtain the element index number
activeTab = $this.index() + 1;
// Only change tabs if the clicked tab isn't active
if (!$this.hasClass('active')) {
// Remove the 'active' class from the original anchor and add it to the current one
$this.addClass('active').siblings().removeClass('active');
// Hide all of the other tabs and fade in the active one
tabContents.siblings().hide().filter(':nth-child(' + activeTab + ')').fadeIn();
}
return false;
});
See a simple demo of this here: http://jsfiddle.net/ND7nU/

Try this :
$('div.side-img').hide();
$('div.side-img:first').show();
$("ul.tabs li").click(function() {
$('div.side-img').eq($(this).index()).show();
// remaining code
}

Check this example on jsfiddle.net

Bit quick and dirty from the top of my head:
var s = activeTab.attr('id');
var num = s.substr(4, 1);
var imgstr = "#image-" + num;
$(".side-img").hide();
$(imgstr).show();
Edit: You can use this anywhere in the tab click event handler.
Edit 2: var s = etc Fix.