We Keep Coding

Change Div using Li in html or javascript

I want to display one div at a time and hide other .
Need the same effect like:http://jsfiddle.net/cqDES/1552/
<ul class="nav-sidebar">
<li>elem1</li>
<li> elem2</li>
<li> elem3</li>
</ul>
<div id="div1">this is div 1</div>
<div id="div2">this is div 2</div>
<div id="div3">this is div 3</div>

If you don't want sliding effect use show()/hide()
$(() => {
$('div:not(#div0)').hide();
$('.nav-sidebar li').click(function () {
var index = $(this).index() + 1;
$(`div:not(#div${index})`).hide();
$(`#div${index}`).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-sidebar">
<li>elem1</li>
<li> elem2</li>
<li> elem3</li>
</ul>
<div id="div1">this is div 1</div>
<div id="div2">this is div 2</div>
<div id="div3">this is div 3</div>

You can use show()/hide() functions :
$(function() {
$('.nav-sidebar li').click(function() {
var index = $(this).index() + 1;
$('div:not(#div' + index + ')').hide();
$('#div' + index).show();
});
});
div[id^='div']
{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-sidebar">
<li>elem1</li>
<li> elem2</li>
<li> elem3</li>
</ul>
<div id="div1">this is div 1</div>
<div id="div2">this is div 2</div>
<div id="div3">this is div 3</div>
show function Documentation
hide function Documentation

I think this is what you are asking for.
JSFiddle
$(function() {
var panels = $('div').hide();
var tabs = $('.nav-sidebar li');
tabs.click(function(orgEvent) {
let clickedTabIndex = tabs.index(orgEvent.currentTarget);
panels.each((index, panel)=>{
$(panel)[index === clickedTabIndex ? "slideDown" : "slideUp"]();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-sidebar">
<li> elem1</li>
<li> elem2</li>
<li> elem3</li>
</ul>
<div id="div1">this is div 1</div>
<div id="div2">this is div 2</div>
<div id="div3">this is div 3</div>

Two active tabs at the same time! How do I do?

The website I am working on has two panels side by side with tabs. It needs to have two panels active at the same time. If I switch panels on the right side, the panel on the left side should still display its content. Now, only one tab is active after I have chosen to switch tab on any of the panels.
I did begin to use Bootstrap, but it was decided that it should be removed from the project. I have then written new SCSS, modified the HTML and created a new javascript file.
Here are some code snippets: First the Javascript file, which handles the logic. Then you can see the code for the left bar, and the content on the panels, and so on.
$(document).ready(function() { /*Javascript for the left bar */
$('ul.nav li').click(function() {
var tab_id = $(this).attr('data-tab');
$('ul.nav li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
});
$('ul.cor.li').click(function() { /*Javascript for the right bar */
var tab_id = $(this).attr('data-tab');
$('ul.cor.li').removeClass('active');
$('.tab-content').removeClass('active');
$(this).addClass('active');
$("#" + tab_id).addClass('active');
});
});
ul.nav li {
list-style-type: none;
display: inline;
overflow: hidden;
padding: 3px 15px;
cursor: pointer;
}
.tab-content {
display: none;
background: white;
padding: 15px;
}
.tab-content.current {
display: inherit;
}
.navbar-light {
border-left-color: black;
}
.nav,
.tabs {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!-- left side bar -->
<div class="flex-container">
<div class="overview-flexbox-mid">
<div id="leftPanel">
<ul class="nav nav-tabs navbar-light bg-light" id="leftTabs">
<li class="nav-item nav-link current" data-tab="tab-1"><i class="fa fa-compress" aria-hidden="true"></i> Subject1
</li>
<li class="nav-item nav-link" data-tab="tab-2"><i class="fa fa-book" aria-hidden="true"></i> Subject2
</li>
</ul>
</div>
</div>
</div>
<div id="tab-1" class="tab-content current">
<div class="flex-container-horizontal" id="leftPanelContent1">
<h1>Some text</h1>
</div>
</div>
<!-- left side content -->
<div id="tab-2" class="tab-content">
<h1>More text</h1>
</div>
<!-- right side bar -->
<div class="overview-flexbox-mid">
<div id="rightPanel">
<ul class="cor nav nav-tabs navbar-light bg-light" id="rightTabs">
<li class="nav-item nav-link active" data-tab="tab-5"><i class="fa fa-bar-chart" aria-hidden="true"></i> Subject3
</li>
<li class="nav-item nav-link" data-tab="tab-6"><i class="fa fa-signal" aria-hidden="true"></i> Subject4
</li>
</ul>
</div>
</div>
<!--right side content-->
<div id="tab-5" class="tab-content active">
<div class="flex-container-horizontal">
<h1>Content</h1>
</div>
</div>
<div id="tab-6" class="tab-content">
<h1>Content 2</h1>
</div>

wrap the left and right tab bars in a div with a class of wrap, select to remove the current class based on that class
<div class="wrap">
......
<div id="leftPanel"></div>
......
</div>
<div class="wrap">
......
<div id="rightPanel"></div>
......
</div>
js:
$('.nav li').click(function() {
var tab_id = $(this).attr('data-tab');
$(this).closest('.wrap').find('ul.nav li,.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
})
demo

You trying to remove active class from an activated tab content but while both tab content has same class name, both will lose their active class. modify like this:
$(document).ready(function () {
$('ul.nav li').click(function () {
var tab_id = $(this).attr('data-tab');
$(this).removeClass('current');
$(this).find('.tab-content').removeClass('current');// modify this
$(this).addClass('current');
$("#" + tab_id).addClass('current');
});
$('ul.cor.li').click(function () {
var tab_id = $(this).attr('data-tab');
$(this).removeClass('active');
$(this).find('.tab-content').removeClass('active');
$(this).addClass('active');
$("#" + tab_id).addClass('active');
});
});

jquery toggle tabs hide active class when clicking same tab

when i click tab 1, 1 content show and active tab class is added.
when i click tab 2, 1 content hides remove tab active class and 2 content show and adds tab active class
but the effect i want is when i click tab 1, 1 content show, click again tab 1 content hides but the tab active class doesn't remove.
Any suggest will be help thanks
<div id="tabs_container">
<ul class="tabs">
<li>
Option 1
</li>
<li>
Option 2
</li>
</ul>
<div class="tab_contents_container">
<div id="tab_1_contents" class="tab_content tab_contents_active">
Option 1 stuff
</div>
<div id="tab_2_contents" class="tab_content">'
Option 2 stuff</div>
</div>
</div>
</div>
<script>
$('.tab-content').hide();
$('.tab').click(function() {
var target = $(this.rel);
$('.tab-content').not(target).hide();
target.toggle();
$('#tabs_container > .nav-tabs > li.tabActive')
.removeClass('tabActive');
$(this).parent().addClass('tabActive');
$('#tabs_container > .tab_contents_container > div.tab_contents_active')
.removeClass('tab_contents_active');
$(this.rel).addClass('tab_contents_active');
});
</script>

you need to use .toggleClass();
$('#tabs_container > .nav-tabs > li.tabActive').not($(this).parent()).removeClass('tabActive');
$(this).parent().toggleClass('tabActive');
$('.tab').click(function() {
var target = $(this.rel);
$('#tabs_container li').not($(this).parent()).removeClass('tabActive');
$(this).parent().toggleClass('tabActive');
$('#tabs_container > .tab_contents_container > div').not($(target)).removeClass('tab_contents_active');
$(target).toggleClass('tab_contents_active');
}).eq(0).click();
.tabActive{
background : #005eff;
padding : 5px;
}
.tabActive > a{
color :#fff;
}
.tab_content{
display : none;
}
.tab_contents_active{
display : block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs_container">
<ul class="tabs">
<li>
Option 1
</li>
<li>
Option 2
</li>
</ul>
<div class="tab_contents_container">
<div id="tab_1_contents" class="tab_content">
Option 1 stuff
</div>
<div id="tab_2_contents" class="tab_content">
Option 2 stuff
</div>
</div>
</div>

Use target.show(); instead of target.toggle();. .toggle() will show()/hide() elements based on its current visibility
Also correct typo. You are using - instead of _ while selecting items.
$('.tab_content').hide(); //typo here!
$('.tab').click(function() {
$('.tab_content').hide();
var target = $(this.rel);
if ($(this).parent().hasClass('tabActive')) {
target.hide();
$(this).parent().removeClass('tabActive');
} else {
$('.tabs li').removeClass('tabActive');
target.show();
$(this).parent().addClass('tabActive');
}
});
.tabActive {
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="tabs_container">
<ul class="tabs">
<li>
Option 1
</li>
<li>
Option 2
</li>
</ul>
<div class="tab_contents_container">
<div id="tab_1_contents" class="tab_content">
Option 1 stuff
</div>
<div id="tab_2_contents" class="tab_content">Option 2 stuff</div>
</div>
</div>

A simpler version of your code:
$('.tab').click(function() {
$('.tab_content').removeClass('tab_contents_active');
$(this.rel).addClass("tab_contents_active");
});
.tab_content { display:none;}
.tab_content.tab_contents_active { display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs_container">
<ul class="tabs">
<li>
Option 1
</li>
<li>
Option 2
</li>
</ul>
<div class="tab_contents_container">
<div id="tab_1_contents" class="tab_content tab_contents_active">
Option 1 stuff
</div>
<div id="tab_2_contents" class="tab_content">
Option 2 stuff</div>
</div>
</div>
</div>

Load dropdown menu content in div using AJAX

My goal is to click in dropdown menu (div id=cssmenu) elements and display data in the using AJAX , so i made a small js code but i don't know how can i make it to load in the div i mentioned and erase the content that div displayed before.
html
<body>
<div class="container">
<div class="row">
<div class="col-md-3" >
<div id='cssmenu'>
<ul>
<li class='active'><span>Home</span></li>
<li class='has-sub'><a href='#'><span>About</span></a>
<ul>
<li><a href='#'><span>Project</span></a></li>
<li class='last'><a href='#'><span>Team</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>News</span></a></li>
</ul>
</div>
</div>
<div class="col-md-9">
<div id="tabs">
<ul class="nav nav-tabs" id="prodTabs">
<li class="active"><a class="clickableLink" href="#tab_quick" data-url="http://localhost/bioinformatica/Main_page/Quick_search.html#qhelp">Quick Search</a></li>
<li><a class="clickableLink" href="#tab_advanc" data-url="#">Advanced Search</a></li>
<li><a class="clickableLink" href="#tab_struct" data-url="something3.txt">Structure Search</a></li>
</ul>
<div class="tab-content">
<div id="tab_quick" class="tab-pane active"></div>
<div id="tab_advanc" class="tab-pane active"></div>
<div id="tab_struct" class="tab-pane active"></div>
</div>
</div>
</div>
</div>
<div class="clearfix visible-lg"></div>
</div>
</div>
</body>
</html>
Javascript
$( document ).ready(function() {
$('#cssmenu a').click(function (e) {
e.preventDefault();
var url = $(this).attr("data-url");
var href = this.hash;
var pane = $(this);
// ajax load from data-url
$(href).load(url,function(result){
pane.tab('show');
});
});
});
For example in the Menu, when i click Home i would like it to load it's data-url attr in the div id=tabs , i.e, replacing all the contents by Home data-url. Thanks !

You can try the following:
$( document ).ready(function() {
$('#cssmenu a').click(function (e) {
e.preventDefault();
var url = $(this).data('url'); // this is the correct syntax
var pane = $(this);
$('#tabs').load(url, function(result){ // load the content directly to #tabs
pane.tab('show'); // display the tab
});
});
});

How to load the content onclick menu?

I have vertical menu. when I click on each menu it should load the content and should display..
here I have my code
<ul id="menu">
<li class="selected">Home</li>
<li>About</li>
<li>Technologies</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
<div id="menu1">
<div class="display" id="menu_home" >
<h3>home page</h3>
</div>
<div class="display" id="menu_about">
<h3>details about the page</h3>
</div>
</div>
so if i click on home menu in div it should show the home page..first function is to highlight the selected menu
and here my jquery
function highlightTab(link_id){
$("a[id^='menu_']").parent().removeClass('selected');
$("#menu_"+link_id).parent().addClass('selected');
}
$(document).ready(function()
{
$('#selected').on('click','a',function()
{
$('.display:visible').fadeOut();
$('.display[id='+$(this).attr('id')+']').fadeIn();
});
});
this is my css code
ul#menu li.selected{
background-color:black;
color:white;
}
.display
{
left: 734px;
position: relative;
}
How to do it?

There were some thing wrong with your code:
You've 2 the same ID's (the A and the DIV), updated with data-target.
You were searching for "#selected" instead of ".selected", updated this to #menu.
In JSFiddle the highlightTab function isn't being found. Why not mixing those two like here?
HTML:
<ul id="menu">
<li class="selected">Home
</li>
<li>About
</li>
<li>Technologies
</li>
<li>Services
</li>
<li>Contact Us
</li>
</ul>
<div id="menu1">
<div class="display" id="menu_home">
<h3>home page</h3>
</div>
<div class="display" id="menu_about">
<h3>details about the page</h3>
</div>
</div>
JS:
function highlightTab(link_id) {
$("a[id^='menu_']").parent().removeClass('selected');
$("#menu_" + link_id).parent().addClass('selected');
}
$(document).ready(function () {
$('#menu').on('click', 'a', function () {
$('.display:visible').fadeOut();
$('.display[id="' + $(this).data('target') + '"]').fadeIn();
});
});
CSS:
ul#menu li.selected {
background-color:black;
color:white;
}
.display {
display: none;
}