Develop Reference

Why are the two options of my toggle () executing?

I have made a button with a link, <a>, and I want to use it to display or not some elements. For this objective I thought .toggle() was a good option.
$('#filter_btn').click(function() {
$('.filters_container').toggle(function() {
$(".filters_container").css({
display: "flex"
});
}, function() {
$(".filters_container").css({
display: "none"
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Nodes
But with this code, when I press the button it shows filters_container but immediately they become invisible again. Why is executing both parts of the toggle function?
Thank very much.

$('#filter_btn').click(function() {
$(".filters_container").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Nodes
<span class="filters_container" style="display: none;">test</span>
simple toggle function use it.

$(function(){
$('#filter_btn').click(function() {
$("p").toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
Nodes
<p style="display:none">testing</p>
</div>

This is not how toggle works in jQuery
Try to change your code to simply this:
$('#filter_btn').click(function() {
$('.filters_container').toggle();
});

Button inside of div not working after clone

Trying to build a dashboard that lets me test animations while linking and unlinking boxes. Got everything working, but when I add the link function, I found that the link doesn't work after the parent element has been cloned. I want it to work so that when someone clicks the left box, the right two boxes show whatever animation is selected as long as the link is active. If the link is inactive, the unlinked box does not animate. Using animate.css for the animations.
Here's the html:
<div id="animations-container">
<center>
<button name="slideInLeft" class="animation-selector selected">Slide In Left</button>
<button name="slideInDown" class="animation-selector">Slide In Down</button>
<button name="zoomInUp" class="animation-selector">Zoom In Up</button>
<button name="zoomIn" class="animation-selector">Zoom In</button>
<button name="pulse" class="animation-selector">Pulse</button>
<button name="wobble" class="animation-selector">Wobble</button>
<button name="shake" class="animation-selector">Shake</button>
</center>
</div>
<div id="container">
<div id="graphs">
<div class="block"><div class="content-block" style="height:280px; background-image:url(current-open-issues-by-opco.png);"></div></div>
<div id="linked" class="linked block animated slideInLeft"><div class="content-block" style="height:237px; background-image:url(days-remaining-to-remediate-open-issues.png);"></div><div class="link-icon"></div></div>
<div id="linked" class="linked block animated slideInLeft"><div class="content-block" style="height:350px; background-image:url(root-cause-of-ltm-issues.png);"></div></div>
</div>
<div style="clear:both;"></div>
</div>
and here's my jquery:
<script>
$(function() {
$(".linked-button").on('click', function() {
$('.linked').remove().clone(true, true).appendTo('#graphs');
});
});
$(function() {
$(".animation-selector").on('click', function() {
var animation = $(this).attr("name")
// console.log("changeclass");
$(".linked").removeClass().addClass('linked block animated');
$(".linked").addClass(animation);
$("#animations-container :button").removeClass('selected');
$(this).toggleClass('selected')
});
});
$(function() {
$(".link-icon").on('click', function() {
$(this).toggleClass('faded');
$(this).parent().toggleClass('linked');
});
});
Also replicated it in jsfiddle: https://jsfiddle.net/3hjfj/
Update - working! Thanks - this was my first stackoverflow question - nice to get my cherry popped. Here's the new code:
$(function() {
$('body').on('click', '.linked-button', function() {
$('.linked').remove().clone(true, true).appendTo('#graphs');
});
$('body').on('hover', '.linked-button', function() {
$('.link-icon').toggleClass("link-hover");
});
$('body').on('click', '.animation-selector', function() {
var animation = $(this).attr("name")
// console.log("changeclass");
$(".linked").removeClass().addClass('linked block animated');
$(".linked").addClass(animation);
$("#animations-container :button").removeClass('selected');
$(this).toggleClass('selected')
});
$('body').on('click', '.link-icon', function() {
$(this).toggleClass('faded');
$(this).parent().toggleClass('linked');
$('.transparent-blue').fade();
});
$('body').on('mouseenter', '.link-icon', function() {
$('.transparent-blue').show();
});
$('body').on('mouseleave', '.link-icon', function() {
$('.transparent-blue').hide();
});
});

Apart from not needing multiple document ready functions, the event handlers are applied only to the objects with those classes that exist at the time they are run, so the cloned objects do not get them. Try this instead:
$("document").on("click", ".link-icon", function() {
$("document").on("click", ".animation-selector, function() {
and
$("document").on("click", ".linked-button", function() {

Use this for dynamically created elements:
$('body').on('click', '.animation-selector', function() {
// do something
});
$('body').on('click', '.link-icon', function() {
// do something
});

How to target a child of a sibling div using jquery

I am trying to study JQuery and I am quite shucked on figuring our how to target a child with a specific class name of a sibling div.
Here is the fiddle that I have written: http://jsfiddle.net/7c9F4/2/
HTML:
<div id="container">
<div class="item">
<div class="item-image">
<img width="100" src="https://www.google.com/images/srpr/logo11w.png" alt="Google" />
</div>
<div class="item-name">
Item 1
</div>
<div class="item-body">
<div class="body-inner hidden">
Body 1
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img width="100" src="https://www.google.com/images/srpr/logo11w.png" alt="Google" />
</div>
<div class="item-name">
Item 2
</div>
<div class="item-body">
<div class="body-inner hidden">
Body 2
</div>
</div>
</div>
</div>
JQuery:
$('.item .item-image').bind({
mouseenter: function() {
$(this).siblings('.item-body').children('body-inner').show();
console.log('Entered');
},
mouseleave: function() {
$(this).siblings('.item-body').children('body-inner').hide();
console.log('Left');
}
});
I have tried to use the JQuery methods .next() and siblings() then try to get the child using the .children() method and it doesn't seem to work. :/

body-inner needs to have a . to indicate a class selector:
$(this).siblings('.item-body').children('.body-inner').hide();
Additionally, as of jQuery 1.7 the .on method is preferred to .bind:
$('.item .item-image').on({
mouseenter: function() {
$(this).siblings('.item-body').children('.body-inner').show();
console.log('Entered');
},
mouseleave: function() {
$(this).siblings('.item-body').children('.body-inner').hide();
console.log('Left');
}
});
Updated Fiddle

Alternatively, you could use hover and toggle():
DEMO jsFiddle
$('.item .item-image').hover(function(){
$(this).siblings('.item-body').children('.body-inner').toggle();
});
PS: you should remove class hidden on second .item-body as in jsFiddle
Or using only CSS:
DEMO jsFiddle
.item-image:hover ~ .item-body > .body-inner {
display: block;
}

Your code works fine. You're just missing . to target class body-inner
$(this).siblings('.item-body').children('.body-inner').hide();
// ------------------------------------- ^ here
Also, you should use .on() instead of .bind(), final code look like:
$('.item .item-image').on({
mouseenter: function() {
$(this).siblings('.item-body').children('.body-inner').show();
console.log('Entered');
},
mouseleave: function() {
$(this).siblings('.item-body').children('.body-inner').hide();
console.log('Left');
}
});
Updated Fiddle
I just notice that the above demo is not working properly for your second image because you've added class hidden for the second .item-body, you should remove it to make it works properly.
If you cannot modify your HTML code, then you can use .eq() and .removeClass() to remove class hidden from your second .item-body:
$('.item-body:eq(1)').removeClass('hidden');
Updated Fiddle

You can bind the mouse events on the outer div .item and use the .find() function in jQuery and navigate to the target element. Here is the js with .find()
$('.item').on({
mouseenter: function () {
$(this).find('.item-body .body-inner').show();
},
mouseleave: function () {
$(this).find('.item-body .body-inner').hide();
}
});
Here is the jsFiddle: http://jsfiddle.net/giri_jeedigunta/u45Ka/

Individual jquery actions for each div

Here is the original structure:
<div class="out">
<div class="in">
</div>
</div>
<div class="out">
<div class="in">
</div>
</div>
<div class="out">
<div class="in">
</div>
</div>
and I add jquery to toggle the "in" div.
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(".in").slideToggle(100);
});
});
see FIDDLE DEMO
However, it controls all the objects, and I don't know how to perform them individually.
Thanks!

Use context selector
$(".in", this).slideToggle(100);
Code
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(".in", this).slideToggle(100);
});
});
Check Fiddle

Make the .in selector relative to this:
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(this).find(".in").slideToggle(100);
});
});
Corrected fiddle

Try this
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(this).children(".in").slideToggle(100);
});
});
updated jsFiddle File

Use this as the context selector in the call to jQuery, like this:
$(".in",this)
Full code:
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(".in",this).slideToggle(100);
});
});
Fiddle: http://jsfiddle.net/kfBDJ/5/

Jquery changing div text value upon clicking on li items

I am building a theme selector for maps and want to reflect the currently selected theme.
The code seems to work but never returns the value of the "li" item, it always returns "s-thumbs" for whatever "li" item I click on. I tried using the .closest() method but to no avail.
I'm following this article.
<script language="javascript">
$("ul.s-thumbs").live("click", function(event) {
$("#theme_title").text(
$(this).closest("ul.s-thumbs li").attr("class")
);
});
</script>
<div id="theme">You have selected the <div id="theme_title"></div> Theme</div>
<div class="container_16" id="themebg">
<!--<div class="grid_1"> <a href="" "img" src="/styles/image/leftarrow.png" id="leftarrow" alt=""/></div>-->
<div class="grid_16 slider-wrapper">
<ul class="s-thumbs">
<li class="Default"> <img src="/styles/image/thumbs/default.png" alt="" />Default</li>
<li class="Hatchery"> <img src="/styles/image/thumbs/hatchery.png" alt="" />Hatchery</li>
</ul>
</div>

$("ul.s-thumbs").on("click", "li", function() {
var myText = $(this).attr("class");
alert( myText );
$("#theme_title").text( myText );
});
Demo jsFiddle
Use the .on() metod: http://api.jquery.com/on/ adding the specific element after the event (click)
This is a new replacement for the (today) deprecated .live() method.

$('ul.s-thumbs li').on('click', function(){
var getClass = $(this).attr('class');
$("#theme_title").text(getClass);
});
Demo link: http://jsfiddle.net/ChaseWest/w2tCE/4/

$("ul.s-thumbs").on("click", "a", function(event) {
var txt = $(this).closest("ul.s-thumbs li").attr("class");
$("#theme_title").text(txt);
});
NOTE live() has been deprecated.

Add the event handler to the li instead of the ul. I also used on which is the preferred method in Jquery 1.7+
$("ul.s-thumbs li").on("click", function(event) {
$("#theme-title").html(
$(this).attr("class")
);
});
Demo: http://jsfiddle.net/euSye/1/

<script language="javascript">
$(document).ready(function() {
$(".s-thumbs").on("click", "a", function(e) {
$("#theme_title").text( $(e.target).parent("li").attr("class") );
});
});
</script>