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/

Show particular div and hide all another after click event

I have three div elements:
<div class="hide_banner" id="1"><img src="1.png"></div>
<div class="hide_banner" id="2"><img src="2.png"></div>
<div class="hide_banner" id="3"><img src="3.png"></div>
After the page is loaded the user should see the 1st div only. Here is the JS/jQ code (this works perfectly):
$(document).ready(function() {
$('.hide_banner').not('#' + 1).hide(3000);
});
The user can pick another banner by click at links on this page:
<ul class="dropdown-menu" role="menu">
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
</ul>
After click for example on the 3rd link (href="#3") the div with id="1" should hide and the div with id="3" shold be shown. I have an idea how to maintain the problem combaining with PHP, but i want to solve it with JS/jQ only, so please help! ;) Here is my JS/jQ code which doesn't work:
$(document).ready(function() {
$('.hide_banner').not('#' + 1).hide(3000);
$('a').click(function() {
var id = $(this).attr('href');
if(id == 1) {
$(id).show(3000);
$('#2').hide(3000);
$('#3').hide(3000);
}
if(id == 2) {
$(id).show(3000);
$('#1').hide(3000);
$('#3').hide(3000);
}
if(id == 3) {
$(id).show(3000);
$('#1').hide(3000);
$('#2').hide(3000);
}
});
});
P.s.: I know that it is incorrect to start id's names with a number ;)

Really, no need for if...else logic here, nor any need to specify the first id - just use :first:
$('.hide_banner').not(':first').hide(3000);
$('a').click(function() {
var id = $(this).attr('href');
$(id).show(3000);
$('.hide_banner').not(id).hide(3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hide_banner" id="1">1</div>
<div class="hide_banner" id="2">2</div>
<div class="hide_banner" id="3">3</div>
<ul class="dropdown-menu" role="menu">
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
</ul>

You already know how to use jQuery not, so use it to exclude the selected target:
JSFiddle: http://jsfiddle.net/vk94mmv2/2/
$(document).ready(function () {
$('.hide_banner:not(:first)').hide(3000);
$('a').click(function () {
var id = $(this).attr('href');
var $show = $(id);
$show.show(3000);
$('.hide_banner').not($show).hide(3000);
});
});
Note: you can change the first selector to use the :not(:first) pseudo selectors to select all but the first banner.

Hide selected by anchor's href

I'm trying to figure out a function that will allow me to hide divs and show them if referring link is clicked.
Hard to explain but here is what I am looking for:
<ul>
<li>Link 1</li>
<li class="active">Link 1</li>
<li>Link 1</li>
<ul>
<div id="id-1">Some content</div> // Hidden
<div id="id-2">Some content</div> // This should only show in document
<div id="id-3">Some content</div> // hidden
Whenever other anchor is being clicked other divs should hide.
I hope his make sense and thank you for your help in advance
Dom

You can use something like this (untested so may need tweaking):
$(document).ready(function() { //fires on dom ready
$("a").click(function(e) { //assign click handler to all <a> tags
$(".classForYourDivs").hide(); //hide all divs (put class on ones you want to hide)
var element = $(e.target);
var href = element.attr("href"); //get the attribute
$(href).show(); //show the relevent one
return false; //important to stop default click behavior of link
});
});
Incidentally you should consider using something other than the href to store this information... take a look at the docs for the jquery data() function

Add a class to the ul and the divs.
<ul class="myUL">
<li>Link 1</li>
<li class="active">Link 1</li>
<li>Link 1</li>
<ul>
<div id="id-1" class="myDivs">Some content</div> // Hidden
<div id="id-2" class="myDivs">Some content</div> // This should only show in document
<div id="id-3" class="myDivs">Some content</div> // hidden
then in CSS,
.myDivs { display: none; }
and Try below js code,
var $myDivs = $('.myDivs');
$('.myUL a').on('click', function () {
$myDivs.hide();
$($(this).attr('href')).show();
});
DEMO: http://jsfiddle.net/LYKVG/

$("body").on("click","a", function(){
var divtoshowselector = $(this).attr("href");
$(divtoshowselector).show().siblings().hide();
})

http://jsfiddle.net/
html
<ul>
<li>Link 1</li>
<li class="active">Link 2</li>
<li>Link 3</li>
<ul>
<div id="id-1">Some content 1</div>
<div id="id-2">Some content 2</div>
<div id="id-3">Some content 3</div>​
css
div {display: none;}
javascript/jquery
$("a").click( function(e) {
e.preventDefault();
var elId = $(this).attr('href');
$('div').hide();
$(elId).show();
});​

I've set up a fiddle for you, check out: http://jsfiddle.net/UsGag/
function currentActive()
{
return $("li.active a").attr("href");
}
$("div:not(" + currentActive() + ")").hide();
$("li a").on("click", function()
{
//hide old active div
$("div" + currentActive()).hide();
$("li").removeClass("active");
//activate new div
$(this).parent().addClass("active");
$("div" + currentActive()).show();
});
Hope this helps you, extend to your own needs. And just for completeness: Don't use the - in ids / classnames.
​

Try
$("a").click( function( ) {
var elId = $(this).attr("href");
$(elId).show().siblings("div[id^=id-]").hide();
});
Fiddle here

adding extra identifiers to dom elements

I have a bunch of menu items in a list format like so
<ul class="menu unselectable">
<li class="group">
Group Title
<ul>
<li class="groupItem i0">item 0</li>
<li class="groupItem i1 over">item 1</li>
</ul>
</li>
<li class="group">
Another Group Title
<ul>
<li class="groupItem i2">item 2</li>
<li class="groupItem i1">item 1 (if I hover here, the others should too</li>
</ul>
</li>
</ul>
The idea is, if I hover on one item with class i1 then all i1 items should behave the same. So I thought of adding a class over to all i1 items when I hover on any of them like so.
$(".groupItem").hover(
function () {
$(this).addClass("over");
},
function () {
$(this).removeClass("over");
}
);
The problem is I can't think of a way to identify what item has just been hovered on aside from $(this). To remedy this I thought of adding i1 as an id to items, but different dom nodes shouldn't have the same id. My next idea was to add the attribute value to the li items but to no avail (when I did a quick test with $(this).val() kept returning 0 regardless of the value actually stored in the node.
Is there any way I can add an identifier so I can just say $(this).<someIdentifier> , and target all the dom nodes with that identifier?

you can add an attribute groupID="{id}" and then call $(this).attr('groupID')

Element.prototype.secondId = '';
and than
document.getElementById('id5').secondId = 13;
As this you just set on any element a new property which you can use as you wish but is just in javascript not in html.

I don't recommend adding false attributes to elements, and this will work even if data attributes are not well supported by the user's browser:
$(".groupItem").hover(
function () {
var className = this.className.split(' ')[1];
$('.' + className).addClass("over");
},
function () {
var className = this.className.split(' ')[1];
$('.' + className).removeClass("over");
}
);
NOTE: Requires that classes are always organized as you specified above. A safer way could be:
var className = $.trim(this.className.replace('groupItem',''));

$(this).filter('#selector')

Please, Try working below code as below once:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<style>
.menu{ display:inline;}
.menu li{ display:inline; float: left;width: 100px;}
.menu li ul{display:none;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".group").hover(
function () {
$(this).find("ul").show();
},
function () {
$(this).find("ul").hide();
}
);
});
</script>
</head>
<body>
<ul class="menu">
<li class="group">
Group Title
<ul>
<li>GT 1</li>
<li>GT 2</li>
</ul>
</li>
<li class="group">
Trochlear Nerve
<ul>
<li>TN 1</li>
<li>TN 2</li>
</ul>
</li>
</ul>
</body>
</html>

in jQuery how to give the priority of being detected by "mouseover" event to the child element

my question is how to give the priority of being detected by "mouseover" event to the child element rather than its parent?
this is the jquery code:
<script>
$(function() {
$("li").mouseover(function(event){
$('#log').html($(this).text());
});
});
</script>
and this is the html code
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3
<ul>
<li>item 3.1</li>
<li>item 3.2</li>
<li>item 3.3</li>
</ul>
</li>
<li>item 4</li>
</ul>
<div id="log">log</div>
how to output the current element when doing mouseover?
the problem is when you mouseover "item 3.1" the jquery will not detect "item 3.1" and instead jquery will assume that you mouseover "item 3" ?
Thanks

You want the event target:
$("li").mouseover(function(event) {
$('#log').html($(event.target).text());
});
From quirksmode (linked above):
Even if an event is captured or
bubbles up, the target/srcElement
always remains the element the event
took place on.
Demo here.

Add a span inside each li around the text, and check for a mouse over on that
<script>
$(function() {
$("li span").mouseover(function(event){
$('#log').html($(this).text());
});
});
</script>
<ul>
<li><span>item 1</span></li>
<li><span>item 2</span></li>
<li><span>item 3</span>
<ul>
<li><span>item 3.1</span></li>
<li><span>item 3.2</span></li>
<li><span>item 3.3</span></li>
</ul>
</li>
<li><span>item 4</span></li>
</ul>
<div id="log">log</div>

Here is an alternative to Karim79 method.
$("li").mouseover(function(event){
$('#log').html($(this).text());
event.stopPropagation();
});
Make sure to read what stopPropagation() actually does.
http://jsbin.com/afunu3

You should select the inner 'li' tags instead of all 'li' tags.
For example, you could add a class='innerItem" to inner 'li', like this:
<li class='innerItem'>item 3.1</li>
Then your jQuery should look like this:
<script>
$(function() {
$("li.innerItem").mouseover(function(event){
$('#log').html($(this).text());
});
});
</script>