We Keep Coding

jquery slidetoggle not working with div, ul, and display: none

I'm trying to toggle a menu dropdown with slideToggle but I can't seem to get it working. My goal is to click on "Attack" and have the list of attack options show. Here is my code.
<div class="turn-option" id="attack">
<h2>Attack</h2>
<div class="attack-menu">
<ul>
<li class="attack-type">Attack 1</li>
<li class="attack-type">Attack 2</li>
<li class="attack-type">Attack 3</li>
<li class="attack-type">Attack 4</li>
</ul>
</div>
</div>
.attack-menu {
display: none;
}
$(document).ready(function() {
$("#attack").click(function() {
$(".attack-menu").slideToggle("fast");
});
});

This works fine. Your jquery library might be causing the error. Try including this script :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Refer this link : Example

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 and hide list items on hover

I have an unordered list looking like this
HTML
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div id="info-1></div>
<div id="info-2></div>
And when you hover over one of the items a window is displayed with some info regarding the item. I have worked this out for one item, now I wanna know how I can make this work for the entire list.
My initial thought was to create one script per each item... but that seems a bit thick considering the functionality of js.
Javascript
$(function(){
$('pop a').hover(function(){
$('#info-1').show();
},function(){
$('#info-1').hide();
});
});
So my question is of course, how can I make this script to work for all items.

I'd suggest:
$('#pop li').hover(
function() {
$('div.info').eq($(this).index()).show();
}, function() {
$('div.info').eq($(this).index()).hide();
});​
Working with slightly-changed HTML:
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>​
JS Fiddle demo.
What I forgot to say is that this will show the .info element that corresponds to the same index as the currently hovered-over li element, so hovering the first li will show the first .info, and so on. So it's dependant on maintaining a predictable relationship between the li and the .info elements.
As an aside, it's possible to replicate this interaction using just CSS, albeit it requires a click rather than a hover event, so long as you amend the li HTML to include a link that points to the id of the relevant div:
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div class="info" id="info1"></div>
<div class="info" id="info2"></div>
<div class="info" id="info3"></div>
<div class="info" id="info4"></div>
<div class="info" id="info5"></div>
<div class="info" id="info6"></div>
<div class="info" id="info7"></div>​
And the CSS:
.info {
/* hides by default */
display: none;
}
.info:target {
/* shows when targeted */
display: block;
}
JS Fiddle demo. ​
Incidentally, quoting attributes is optional (though if it's an attribute that contains white-space it must be quoted), but if you quote you must have a quote at both ends of the value you're quoting: <div id="info-1></div> is not valid HTML (since the string isn't closed until the next line at the beginning of the next attribute); use: <div id="info-1"></div>.
And, further, your posted jQuery:
$(function(){
$('pop a').hover(function(){
$('#info-1').show();
},function(){
$('#info-1').hide();
});
});
This can't work, because:
the selector won't match any elements, you're trying to target an a element inside of a pop element (which, obviously, doesn't exist). What you need to do is preface the id with a # (as you do in the next line, so I'm assuming a typo there), to give: $('#pop a'). But,
there are no a elements in the #pop element, therefore no events will be, or can be, bound.
If you need to use that form, however, then a couple of adaptations can make it work:
$(function(){
$('#pop li').hover(function(){
$('#info-' + $(this).text().match(/(\d+)/)).show();
},function(){
$('#info-' + $(this).text().match(/(\d+)/)).hide();
});
});
JS Fiddle demo.
References:
eq().
hide().
hover().
index().
match().
show().
text().

try this :
$(function(){
$('#pop li').hover(function(){
$('#info-'+$(this).index()+1).show();
},function(){
$('#info-'+$(this).index()+1).hide();
});
});

you've binded an hover event on all a tags inside pop element (though you have syntax error, you should always add '#' when addressing an element by id) and you don't have them
what you''re looking for is :
$('#pop li').hover(function() {
});

Here is sample http://fiddle.jshell.net/7QmR5/
HTML:
<div id="pop">
<ul>
<li id="li1">Item 1</li>
<li id="li2">Item 2</li>
<li id="li3">Item 3</li>
</ul>
</div>
<div id="info-1" style="display:none;">info 1</div>
<div id="info-2" style="display:none;">info 2</div>
<div id="info-3" style="display:none;">info 3</div>
JavaScript:
$(function(){
$('#pop li').hover(function(){
$('#info-' + $(this).attr('id').replace('li','')).show();
},function(){
$('#info-' + $(this).attr('id').replace('li','')).hide();
});
});​

I've got an easier solution:
CSS
#info-1{
display:none;
}
ul > li:hover #info-1 {
display:block;
}
giving the li elements an id will make it easier to select them using CSS unless you want to use pseudo I believe it's called.
Or the jQuery if needed:
$('li:eq[0]','#pop').hover(function(){
$('info-1').show();
});

Set DIV to visible when hyperlink hover - CSS/HTML

I have attached a snippet of my HTML.
Is it possible if I hover over the hyperlink with ID li1link that div#li1 is displayed, and if I hover over the hyperlink with ID li2link then div#li2 is displayed. Is this easily achievable?
So I guess the default is the DIVs are set to display:hidden until that particular related link is hovered over/active.
To confirm, only one DIV will be visible at any time.
Here is my current HTML:
<ul>
<li>Test 1 - hover over to display ul#li1</li>
<li>Test 2 - hover over to display ul#li2</li>
</ul>
<div id="li1">
<ul>
<li>Content 1</li>
<li>Content 1</li>
</ul>
</div>
<div id="li2">
<ul>
<li>Content 2</li>
<li>Content 2</li>
</ul>
</div>
I'm open to using jQuery or CSS, I'm just not totally sure how to approach this issue. Confused is an understatement.
Many thanks for any pointers with this.

You could try:
// for all links that have link keyword in their ids
$('a[id*="link"]').mouseenter(function(){
// get the div id out of this
var id = this.id.replace('link', '');
// hide all other divs
$('div[id^="li"]').hide();
// show the needed div now
$('#' + id).show();
});
// hide when mouse moves away
$('a[id*="link"]').mouseout(function(){
var id = this.id.replace('link', '');
$('#' + id).hide();
});
To confirm, only one DIV will be visible at any time.
These lines take care of that:
$('div[id^="li"]').hide();
// show the needed div now
$('#' + id).show();

$("#li1link).hover(function(){
$("#li1").attr('display','block');
});
$("#li1link).mouseover(function(){
$("#li").attr('display','none');
});
You can do similar thing when #li2link and display #li2 and hide it.

try this:
<!DOCTYPE html>
<html>
<head>
<script>
var p = {
onmouseover: function(link) {
document.getElementById(link.id.substring(0, 3)).style.display = "block";
},
onmouseout: function(link) {
document.getElementById(link.id.substring(0, 3)).style.display = "none";
}
};
</script>
</head>
<body>
<ul>
<li>Test 1 - hover over to display ul#li1</li>
<li>Test 2 - hover over to display ul#li2</li>
</ul>
<div id="li1" style="display: none;">
<ul>
<li>Content 1</li>
<li>Content 1</li>
</ul>
</div>
<div id="li2" style="display: none;">
<ul>
<li>Content 2</li>
<li>Content 2</li>
</ul>
</div>
</body>
</html>

You can check it here
CSS:
#li1link, #li2link {
display: none;
}​
jQuery:
$("#li1, #li2").hover(
function () {
$('#' + $(this).attr('id') + 'link').show();
},
function () {
$('#' + $(this).attr('id') + 'link').hide();
});​

With a minor html change (adding a class to your ul) you can handle it all in 1 function,
Assumption: The a->href value and the div ID are same.
DEMO
HTML Change:
<ul class="showDivOnHover">
<li>Test 1 - hover over to display ul#li1</li>
<li>Test 2 - hover over to display ul#li2</li>
</ul>
JS:
$('.showDivOnHover a').hover (function() {
$($(this).attr('href')).show();
}, function () {
$($(this).attr('href')).hide();
});

I used jQuery, tried to give you a quick solution:
http://jsfiddle.net/88nKd/
<ul id="nav">
<li>Test 1 - hover over to display ul#li1</li>
<li>Test 2 - hover over to display ul#li2</li>
</ul>
<div id="li1" class="none">
<ul>
<li>Content 1</li>
<li>Content 1</li>
</ul>
</div>
<div id="li2" class="none">
<ul>
<li>Content 2</li>
<li>Content 2</li>
</ul>
</div>
css:
.none{
display:none;
}
js:
$(document).ready(function(){
$(".liLink").mouseover(function(){
var linkNumber = $(this).attr('id');
var divNumber = '#li'+linkNumber;
$(divNumber).show();
}).mouseout(function(){
var linkNumber = $(this).attr('id');
var divNumber = '#li'+linkNumber;
$(divNumber).hide();
});
});
Cheers!

I find having a class which deals with the styles and then adding and removing those works well for me, so:
(Please note the below code will remove the class when not hovering over the link and I would recommend giving the links sensible class names to do the selector on rather than all a tags, same with the divs)
CSS:
div {
visibility:hidden; // Or display:none; or left: -999em; depending on what your page is there for.
}
div.show {
visibility: visible;
}
JS:
$('a').hover(function() {
$($(this).attr('href')).addClass('show');
}, function() {
$($(this).attr('href')).removeClass('show');
});

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>