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();
});

Hide div with jquery and cookies not hiding properly

So I'm using this script:
$(document).ready(function() {
if ($.cookie('noShowWelcome')) $('.welcome').hide();
else {
$("#close-welcome").click(function() {
$(".welcome").fadeOut(1000);
$.cookie('noShowWelcome', true);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/carhartl/jquery-cookie/master/src/jquery.cookie.js"></script>
<div class="welcome">
</div>
To show the div "welcome" only the first time a user visits my website and then to hide it forever.
For the cookies I used jQuery.cookie javascript as suggested in this post:
https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js
Everything works great. The only problem is that I still can not figure out how to avoid the hidden div flashing for a second and then hiding when users visit my website after closing the div "welcome". Can somebody help me with that?

For the FOUC, what you need to do is to use a small script to convert everything from CSS / Properties into JavaScript. For browsers that do not support hidden property, you can use:
$(function () {
$(".hide-me-by-js").hide().removeClass("hide-me-by-js");
// Write your other conditional logic here...
});
.hide-me-by-js {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hide-me-by-js">Initially Hidden</div>
If you want to leverage the new hidden property (at a cost of browser compatibility), use the following:
$(function () {
$("[hidden]").hide().removeAttr("hidden");
// Write your other conditional logic here...
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div hidden>Initially Hidden</div>
Solution
In your case, it would be typically this:
$(function() {
$(".hide-me-by-js").hide().removeClass("hide-me-by-js");
// Write your other conditional logic here...
if ($.cookie('noShowWelcome'))
$('.welcome').hide();
else {
$('.welcome').show();
$("#close-welcome").click(function() {
$(".welcome").fadeOut(1000);
$.cookie('noShowWelcome', true);
});
}
});
.hide-me-by-js {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/carhartl/jquery-cookie/master/src/jquery.cookie.js"></script>
<div class="hide-me-by-js welcome">Initially Hidden</div>
Note: The demo will not work because the stack snippets iframe is sandboxed. Please just use the code and check in your system.
Added a Fully Working Code Demo.

Give it attr "hidden" by default and just show it when you need to.
$(document).ready(function() {
if (!$.cookie('noShowWelcome')){
$('.welcome').show();
$("#close-welcome").click(function() {
$(".welcome").fadeOut(1000);
$.cookie('noShowWelcome', true);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="welcome" style="display:none;">
Welcome
</div>

jQuery show div only if has class

I have some problems with show/hide element. I have 2 popups on one page and I need hide one popup if another popup has class.
For example:
<body class="home">
<div class="popup main"></div>
<div class="popup"></div>
</body>
So, if body.home has .main I need to show only .main popup and hide or remove another .popup.
I'va tried
if ($('.home').find('.main')) {
$('.home').find('.main').show();
$('.home').find('.popup').remove();
}
But it does not working as I need, because in some reason I'll have code only with one popup block
<body class="home">
<div class="popup"></div>
</body>

Just try this,
if($(".popup").hasClass('main')){
$(".popup").hide();
$(".main").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body class="home">
<div class="popup main">main</div>
<div class="popup">another</div>
</body>

$( '.home .popup' ).not( ".main" ).remove();

You may want something like this:
$('.popup.main').length &&
$('.popup').show().not('.main').remove() ||
$('.popup').show();
JSFiddle
The above code is basically a "shortcut" of this:
// if there's a popup with class .main:
if($('.popup.main').length){
// show it:
$('.popup.main').show();
// and remove the one without class .main:
$('.popup').not('.main').remove();
// else, if there's no popup with class .main:
}else{
// show the .popup:
$('.popup').show();
}

If you want to show/hide element, use jQuery.hide() or jQuery.show(). If you use jQuery.remove() then u don't have chance to do it again because it was removed from DOM tree.

check with hasClass()
if ($('.home .popup').hasClass('main')) {
$('.home .popup').hide();
$('.home .main').show();
}
This will hide all popups, then show only that has .main class
Working pen
Edit
ok this in not working when .home has only one child.
Try solving this with css
.home .popup:not(.main) {
display: none;
}
.home .popup:only-child {
display: block !important;
}
with this code you only have to add/remove .main class to manage visibility
Working pen with css

Changing a image for another after clicking on it with jquery

this is going to be my first question so far cause i always do a research before using forums, but i dont get this to work.
I have an Image that works as a button for a toggle animation (button.png) and i want that image to change after clicking on it for another image (button2.png), and once you click the second image it changes again to the first image, i have:
<script type="text/javascript">
$(document).ready(function() {
// when click on the tag with id="btn"
$('#btn').click(function() {
// change the state of the "#idd"
$('#idd').toggle(800, function() {
// change the button text according to the state of the "#idd"
if ($('#idd').is(':visible')) {
$('#btn').attr('images/button2.png', this.href); // Show Less.. button
} else {
$('#btn').attr('images/button.png', this.href); //Learn More.. button
}
});
});
});
</script>
and my Html:
<div id="idd" style="display:none;">
- Here my hidden content -
</div>
<!-- Button -->
<img src="images/button.png" style="cursor: pointer;" id="btn">
What im doing wrong? Please Help :(

Check the syntax for .attr. It should be something like
$('#btn').attr('src', 'your image src');
Function Reference: http://api.jquery.com/attr/

To change the value of src you use 'attr' like this:
$('#btn').attr('src', 'images/button2.png');
Here is a DEMO
HTML
<div id="idd" class='display-none'>
- Here my hidden content -
</div>
<!-- Button -->
<img src="http://placekitten.com/40/40" id="btn">
CSS
.display-none {
display:none;
}
jQuery
var btn = $('#btn');
var idd = $('#idd');
btn.click(function() {
idd.toggle(800, function() {
// change the button text according to the state of the "#idd"
if (idd.hasClass('display-none')) {
btn.attr('src', 'http://placekitten.com/50/50');
idd.removeClass('display-none');
} else {
btn.attr('src', 'http://placekitten.com/40/40');
idd.addClass('display-none');
}
});
});

take one division e.g #play-pause-button and other in this i.e #play-pause. now put ur images in the src of inner division , on the click of outer divison source of innner division will change..
here is simillar example i'm working on. hope will help you.!
$('#play-pause-button').click(function () {
// $('#play-pause-button').play();
if ($("#media-video").get(0).paused) {
$("#media-video").get(0).play();
$("#play-pause").attr('src', "Image1 path");
}
else {
$("#media-video").get(0).pause();
$("#play-pause").attr('src', "Image2 path");
}
});

You should use css to associate image(s) on your "button" and a css class to determine which to show.
You can then use Jquery's ToggleClass() to add/remove the class. You can use the same class to show/hide your hidden content.
markup
<div id="idd">
- Here my hidden content -
</div>
<div id="btn">Click Me</div>
css
#idd.off {
display:none;
}
#btn {
border:1px solid #666;
width:100px; height:100px;
background:#fff url(images/button.png) no-repeat 0 0; // Show Less.. button
}
#btn.off {
background:#fff url(images/button2.png) no-repeat 0 0; //Learn More.. button
}
jquery
$('#btn').click(function(){
$('#idd').toggleClass('off');
$('#btn').toggleClass('off');
});

How to show the child div on mouse hover of parent div

I have a number of parent divs (.parent_div), which each contain a child div (.hotqcontent) where I output data from my database using a loop.
The following is my current markup:
<div class="content">
<div class="parent_div">
<div class="hotqcontent">
content of first div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of second div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of third div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of fourth div goes here...
</div>
<hr>
</div>
</div>
What I would like to achieve is when a user hovers / mouseovers a parent div, the contents of the child div contained within should be revealed.
To achieve this I wrote the following jQuery script but it doesn't appear to be working. It's not even showing the alert!
<script>
$(document).ready(function() {
$(function() {
$('.parent_div').hover(function() {
alert("hello");
$('.hotqcontent').toggle();
});
});
});
</script>
How can I modify or replace my existing code to achieve the desired output?

If you want pure CSS than you can do it like this....
In the CSS below, on initialization/page load, I am hiding child element using display: none; and then on hover of the parent element, say having a class parent_div, I use display: block; to unhide the element.
.hotqcontent {
display: none;
/* I assume you'll need display: none; on initialization */
}
.parent_div:hover .hotqcontent {
/* This selector will apply styles to hotqcontent when parent_div will be hovered */
display: block;
/* Other styles goes here */
}
Demo

Try this
$(document).ready(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});
Or
$(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});

You can use css for this,
.parent_div:hover .hotqcontent {display:block;}

This can be done with pure css (I've added a couple of bits in just to make it a bit neater for the JSFIDDLE):
.parent_div {
height: 50px;
background-color:#ff0000;
margin-top: 10px;
}
.parent_div .hotqcontent {
display: none;
}
.parent_div:hover .hotqcontent {
display:block;
}
This will ensure that your site still functions in the same way if users have Javascript disabled.
Demonstration:
http://jsfiddle.net/jezzipin/LDchj/

With .hotqcontent you are selecting every element with this class. But you want to select only the .hotqcontent element underneath the parent.
$('.hotqcontent', this).toggle();

$(document).ready(function(){
$('.parent_div').on('mouseover',function(){
$(this).children('.hotqcontent').show();
}).on('mouseout',function(){
$(this).children('.hotqcontent').hide();
});;
});
JSFIDDLE

you don't need document.ready function inside document.ready..
try this
$(function() { //<--this is shorthand for document.ready
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
//or
$(this).children().toggle();
});
});
and yes your code will toggle all div with class hotqcontent..(which i think you don't need this) anyways if you want to toggle that particular div then use this reference to toggle that particular div
updated
you can use on delegated event for dynamically generated elements
$(function() { //<--this is shorthand for document.ready
$('.content').on('mouseenter','.parent_div',function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
//or
$(this).children().toggle();
});
});

you can try this:
jQuery(document).ready(function() {
jQuery("div.hotqcontent").css('display','none');
jQuery("div.parent_div").each(function(){
jQuery(this).hover(function(){
jQuery(this).children("div.hotqcontent").show(200);
}, function(){
jQuery(this).children("div.hotqcontent").hide(200);
});
});
});