Develop Reference

function targeting only clicked element

i have a page with several accordions, which are working, but the js is affecting all accordions and not only the clicked on accordion as it should be. how does the JS needs to be changed that only the "clicked on" accordion changes?
here's the js:
jQuery(document).ready(function(){
jQuery('ul.tabs li').click(function(){
var tab_id = jQuery(this).attr('data-tab');
jQuery('ul.tabs li').removeClass('current');
jQuery('.tab-content').removeClass('current');
jQuery(this).addClass('current');
jQuery("#"+tab_id).addClass('current');
})
})
and here one of the accordeons:
<div class="mytabcontainer">
<ul class="tabs">
<li class="tab-link current" data-tab="A-1">BUTTON A</li>
<li class="tab-link" data-tab="B-1">BUTTON B</li>
<li class="tab-link" data-tab="C-1">BUTTON C</li>
</ul>
<div id="A-1" class="tab-content current">
content A
</div>
<div id="B-1" class="tab-content">
content B
</div>
<div id="C-1" class="tab-content">
content C
</div>
</div>
<!-- container -->
thanks!

That is because you select all accordions in the page.
You want to do something like this:
jQuery('ul.tabs li').click(function(){
var tab_id = jQuery(this).attr('data-tab');
jQuery(this).closest('.mytabcontainer').find('ul.tabs li').removeClass('current');
jQuery(this).closest('.mytabcontainer').find('.tab-content').removeClass('current');
jQuery(this).addClass('current');
jQuery("#"+tab_id).addClass('current');
})

Change the css of li and div on click using jQuery

This is my view:
<div class="tabbable">
<ul class="nav nav-tabs">
<li id="liTab1" class="active"><a id="a1" data-toggle="tab">Upload TOT Master</a></li>
<li id="liTab2"><a id="a2" data-toggle="tab">View TOT Master</a></li>
<li id="liTab3"><a id="a3" data-toggle="tab">Upload TOT Master Adhoc</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tab3">
<p>Howdy, I'm in Section 3.</p>
</div>
</div>
</div>
The above code which represents the view in tab container format like below:
On changing the tab, I want its corresponding content div should become active and remaining tab would become inactive. I used the below javascript function, but its not working:
jQuery:
$(document).ready(function () {
$("#a1").click(function () {
$("#liTab1").addClass('active');
$("#liTab2").removeClass('active');
$("#liTab3").removeClass('active');
$("#tab1").addClass('tab-pane active');
$("#tab2").addClass('tab-pane inactive');
$("#tab3").addClass('tab-pane inactive');
});
$("#a2").click(function () {
$("#liTab1").removeClass('active');
$("#liTab2").addClass('active');
$("#liTab3").removeClass('active');
$("#tab2").addClass('tab-pane active');
$("#tab1").addClass('tab-pane inactive');
$("#tab3").addClass('tab-pane inactive');
});
$("#a3").click(function () {
$("#liTab1").removeClass('active');
$("#liTab2").removeClass('active');
$("#liTab3").addClass('active');
$("#tab3").addClass('tab-pane active');
$("#tab1").addClass('tab-pane inactive');
$("#tab2").addClass('tab-pane inactive');
});
});
How to achieve this?

Twitter-bootstrap-tabs have one more property in html called data-target which when set to its corresponding tab target will automatically do this for you without any help of javascript. Check the below code and DEMO here
<ul class="nav nav-tabs">
<li id="liTab1" class="active"><a id="a1" data-target="#tab1" data-toggle="tab">Upload TOT Master</a></li>
<li id="liTab2"><a id="a2" data-target="#tab2" data-toggle="tab">View TOT Master</a></li>
<li id="liTab3"><a id="a3" data-target="#tab3" data-toggle="tab">Upload TOT Master Adhoc</a></li>
</ul>

You don't have to access the item individually nor you have to add the anchor inside the list. You can just change the pointer using css.
You can change html in this way:
<li id="liTab1" class="active" data-tab="tab1">Upload TOT Master</li>
<li id="liTab2" data-tab="tab2">View TOT Master</li>
<li id="liTab3" data-tab="tab3">Upload TOT Master Adhoc</li>
and this is the js piece of code:
$('ul.nav-tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.nav-tabs li').removeClass('active');
$('.tab-pane').removeClass('active');
$(this).addClass('active');
$("#"+tab_id).addClass('active');
});

show/hide div with id based on data attribute (onclick)

I have the following List:
<ul>
<li>Main</li>
<li>Title 1</li>
<li>Title 2</li>
<li>Title 3</li>
<li>Title 4</li>
</ul>
And the following div structure:
<div id="main">... Content ...</div>
<div id="title_1">... Content ...</div>
<div id="title_2">... Content ...</div>
<div id="title_3">... Content ...</div>
<div id="title_4">... Content ...</div>
At the beginning all div's are visible. (Because of Google and for User without JS)
If the page is loaded, all except the main div should be hidden. If I'm clicking on the navigation point with the data attribute "title_1" the related div should be visible and the main div should be hidden also. Also the class active should jump to the new active navigation point. :)
Is that possible? I don't know how to get the solution for this problem.
Thanks for your help!

You can use on click event on a elements inside ul li and get the attribute data-related. Then you can use this and find div with id same as data-related and toggle(hide/show or anything else):
$("ul li a").on("click", function() {
$("div[id=" + $(this).attr("data-related") + "]").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Main
</li>
<li>Title 1
</li>
<li>Title 2
</li>
<li>Title 3
</li>
<li>Title 4
</li>
</ul>
<div id="main">... Content ...</div>
<div id="title_1">... Content ...</div>
<div id="title_2">... Content ...</div>
<div id="title_3">... Content ...</div>
<div id="title_4">... Content ...</div>
Another example with addClass/removeClass:
$("ul li a").on("click", function() {
$("div").removeClass("activeLnk");
$("div[id=" + $(this).attr("data-related") + "]").addClass("activeLnk");
});
.activeLnk {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Main
</li>
<li>Title 1
</li>
<li>Title 2
</li>
<li>Title 3
</li>
<li>Title 4
</li>
</ul>
<div id="main">... Content ...</div>
<div id="title_1">... Content ...</div>
<div id="title_2">... Content ...</div>
<div id="title_3">... Content ...</div>
<div id="title_4">... Content ...</div>

you could match the ID with the data-attr like this:
$("div").each(function(){
$(this).hide();
if($(this).attr('id') == 'main') {
$(this).show();
}
});
$('a').on( "click", function(e) {
e.preventDefault();
var id = $(this).attr('data-related');
$("div").each(function(){
$(this).hide();
if($(this).attr('id') == id) {
$(this).show();
}
});
});
http://jsfiddle.net/mcko06ht/

Add a class to this html code :
<div id="main" class="tab">... Content ...</div>
<div id="title_1" class="tab">... Content ...</div>
<div id="title_2" class="tab">... Content ...</div>
<div id="title_3" class="tab">... Content ...</div>
<div id="title_4" class="tab">... Content ...</div>
Put this in a script tag :
$('ul a').click(function(e){
$('ul li').removeClass('actif');
$(this).find('li').addClass('actif');
$('.tab').hide();
$('#'+$(this).attr('data-related')).show();
//This is also valid
//$('#'+$(this).data('related')).show();
e.preventDefault();
});

navigation through JqueryUI tabs using <a> tag

I found out on several articles that it is possible to navigate JqueryUI tabs using a button or tag.
I am using this simple method
$("#vtabs").tabs();
$("#tabsinner").tabs();
$(".changeTab").click(function() {
alert("asdas");
var selected = $("#tabsinner").tabs("option", "selected");
$("#tabsinner").tabs("option", "selected", selected + 1);
});
and the html :
<div id="vtabs">
<ul id="verticalUl">
<li>Outer Tab 1</li>
<li>Outer Tab 2</li>
<li>Outer Tab 3</li>
</ul>
<div id="vtab-1">
<div id="tabsinner" >
<ul id="horizontalUl">
<li>Inner Tab 1</li>
<li>Inner Tab 2</li>
<li>Inner Tab 3</li>
</ul>
<div id="tabsinner-1">
<h2>Content heading 1</h2>
<button type="button" class="nexttab">Next Tab</button>
</div>
<div id="tabsinner-2">
<h2>Content heading 2</h2>
<button type="button" class="nexttab">Next Tab</button>
</div>
<div id="tabsinner-3">
<h2>Content heading 3</h2>
</div>
</div>
</div>
<div id="vtab-2">
<h2>Vertical Tab Content heading 2</h2>
</div>
<div id="vtab-3">
<h2>Vertical Tab Content heading 3</h2>
</div>
Now I am using vertical tabs to the left side and than more horizontal tabs inside the outer tabs (nested tabs). Now I think that this is not the issue since I removed the outer ones and it still doesn't work.
Thanks!

There are 2 problems I can see, the class of the next button is nexttab and the option to use is active
$(".nexttab").click(function () {
var selected = $("#tabsinner").tabs("option", "active");
$("#tabsinner").tabs("option", "active", selected + 1);
});
Demo: Fiddle

Show first div on page load and hide others and then show the rest on click of the menu items

I am working on a menu where on click of the navigation items, the div will be shown, but by default, the first div should be shown and rest hidden. They should be seen only on click of other navigation items.
Below is my code that I have tried so far.
The HTML:
<ul id="menu">
<li class="page_item current_page_item justClick">a</li>
<li class="page_item page-item-2 justClick">b</li>
<li class="page_item page-item-2 justClick">c</li>
<li class="page_item page-item-2 justClick">d</li>
<li class="page_item page-item-2 justClick">e</li>
<li class="page_item page-item-2 justClick">f</li>
<li class="page_item page-item-2 justClick">g</li>
<li class="page_item page-item-2 justClick">h</li>
<li class="page_item page-item-2 justClick">i</li>
</ul>
<div class="content">
</div>
<div class="content1">
cccc1
</div>
<div class="content2">
cccc2
</div>
<div class="content3">
cccc3
</div>
<div class="content4">
cccc4
</div>
<div class="content5">
cccc5
</div>
<div class="content6">
cccc6
</div>
<div class="content7">
cccc7
</div>
<div class="content8">
cccc8
</div>
<div class="content9">
cccc9
</div>
The Script:
$('.justClick').bind('click', function() {
$('div.content').html($('div.content' + ($(this).index()+1)).html());
});
The CSS:
.content {
background-color: red;
}
The JSFiddle link:
http://jsfiddle.net/6uzU6/
I am getting to achieve the onclick functionality on the click of navigation items on click of them, but all the div's are visible.
What I want, is that all the div's except first div (with the class .content) should be hidden and when you click on the navigation items, it should show up.

Try this:
$('div').not(".content,.content1").hide();
$('.justClick').bind('click', function() {
$('div').not(".content").hide();
$('div.content').html($('div.content' + ($(this).index()+1)).html());
});
DEMO

It seems like there is something missing in your code because there is no relation between the links and div you want to show. you will require more attributes on to maintain a relations between them.
A better approach would be apply a common class to all div like 'content-block' and class equal to use following code.
$(".content-block:not(:first)").hide();
and show respective div on click on link
$("#menu li").click(function(e){
$(".content-block").eq($(this).index()).show();
});
you can use other parameters as well to relate them instead of index.

Give attribute to div runat="server" and Id="dv1"
using property display block and none u can show or hide it