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();
});
Related
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>
I have a div which i am trying to toggle its class from one to another. I am able to toggle it only once but it will not return to the original class. I looked around for possible answers and looked into the propogation function, however i am unsure this is the correct use?
<body>
<div id="wrapBreather">
<div id="counter" class="cInact">
<!--<canvas id="timerAnimation"></canvas>-->
</div>
</div>
<br />
<button id="startStopCount" class="HomeButton" >Start</button>
<script>
$(startStopCount).click(function(e){
e.stopPropagation();
$('.cInact').toggleClass('cDown cInact');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
</script>
</body>
You are getting the element via $('.cInact'). However, when you toggle the class .cInact, you can no longer get that element by $('.cInact') (it doesn't have that class anymore).
You can either do a selection with $('#counter') (getting the ID instead of the class, because you aren't toggling the ID) or assign the element reference to a variable:
var myAwesomeCounter = $('.cInact');
// Then use
myAwesomeCounter.toggleClass('cDown cInact');
Well, you're selecting the class 'cInact' and then toggling it's class.
i.e- removing it.
Wen you're trying to select the element again with the same selector: classname == cInact it's no longer true for that element. so you select nothing, and nothing happens.
To fix this, try using a different selector- e.g- id, like so-
$('#counter').toggleClass('cDown cInact');
The selector $(startStopCount) is wrong. It should be $("#startStopCount")
$('#startStopCount').click(function(e){
e.stopPropagation();
$('.cInact').toggleClass('cDown');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrapBreather">
<div id="counter" class="cInact">
<!--<canvas id="timerAnimation"></canvas>-->
</div>
</div>
<br />
<button id="startStopCount" class="HomeButton" >Start</button>
</body>
$('#startStopCount').click(function(e){
e.stopPropagation();
$('#counter').toggleClass('cDown cInact');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
Better perhaps:
$('#startStopCount').click(function(e){
e.stopPropagation();
$('#counter').toggleClass('cDown cInact');
});
$('body').click(function () {
$('#counter').removeClass('cDown');
});
I want the div #reloadWarningBackground to show ONLY when hovering over the button #reloadButton.
Here is my code:
$('#reloadButton').mouseover(function() {
$('#reloadWarningBackground').show();
});
Use mouseout like following.
$('#reloadButton').mouseover(function() {
$('#reloadWarningBackground').show();
}).mouseout(function() {
$('#reloadWarningBackground').hide();
})
UPDATE
It is better to use mouseenter since mouseover will be executed repeatedly.
$('#reloadButton').mouseenter(function () {
$('#reloadWarningBackground').show();
}).mouseleave(function () {
$('#reloadWarningBackground').hide();
})
The simplest and best way to address this problem is using toggle().
//html
<button id="reloadButton">
Hover me
</button>
<div id="reloadWarningBackground" style="display:none;">
<p>
Hello this is me
</p>
</div>
//Javascript
$('#reloadButton').hover(function() {
$('#reloadWarningBackground').toggle();
});
fiddle
I have just trying to come up with a button to hide content based on a example I've seen that works.
HTML
<button id="button">Test</button><br/><br/>
<div id="panel">Test Panel</div>
jQuery
$(document).ready(function(){
$("#button").toggle(function() {
if $("#panel").css("display") == "none" {
$("#panel").html("Show");
} else {
$("#panel").html("Hide");
};
});
});
CSS
#panel {display:none;}
Any help is appreciated. Thank you!
Toggle is deprecated.. Just attach a click event to the button and use the toggle method for the panel
$("#button").click(function() {
$("#panel").toggle();
});
Check Fiddle
I have a long list of HTML in this format:
<div id="item555">
Some name
show details
Action
</div>
<div id="details555">
Some details
</div>
I can't figure out how to:
Show the Action button only when the item div is hovered.
Show the Details box when the Show details link is clicked.
I know this is really basic js stuff! :(
I've made a few amendments to your javascript, HTML and CSS, here's a fiddle with everything working.
I also made sure the code is not broken by having repeated elements.
JS
$(".item-container").hover(
function() {
$(".action", this).show()
},
function() {
$(".action", this).hide()
}
);
$(".details").click(function(e) {
e.preventDefault();
var detailsDiv = $(this).parent().next("DIV");
detailsDiv.toggle();
if (detailsDiv.is(":visible")) {
$(this).text("Hide details")
}
else {
$(this).text("Show details")
}
});
CSS
.action, .details-container { display: none; }
First of all, I updated your markup a bit:
<div id="item555" class="item">
Some name
show details
Action
</div>
<div id="details555" class="details">
Some details
</div>
Then I would use something like this in jQuery.
$('.show-details').click(function() {
$(this).parent('div').next('div.details').show();
});
$('.item').hover(function() {
$(this).find('.action-button').show();
}, function();
You can try with having different class attached to your elements. Hope this code helps
<html>
<head>
<title>Test Show Hide Div</title>
<script src="jquery.1.6.1.min.js"></script>
<style>
.item {
color: red;
}
.anchorDetails {
color: green;
}
.anchorAction {
color: blue;
display: none;
}
.noDisplay {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.item').hover(function() {
$('.noDisplay').toggle();
});
$('.anchorDetails').click(function() {
$('.anchorAction').toggle();
});
});
</script>
</head>
<body>
<div id="item555" class="item">
Some name show details Action
</div>
<div id="details555" class="noDisplay">Some details</div>
</body>
</html>
$('div#item555').hover(function() { $('a#button555').show(); })
You should here specify a classname or, better, an ID for show details, you could do it inline though. But, assume, it's id is 'show-detail':
$('a#show-detail').click(function() { $('div#details555).show() });
Please, notice, I've used tag#id to increase performance. jQuery selects elements a way much faster if you specify tagname. If you are using an ID, it is not that big deal, but if you use $('.classname') selector and you know all your .classname are divs, it's much better to use $('div.classname')
P.S. if you are looking for more generic way, you probably better look at other answers.
<div id="item555">
Some name
show details
Action
</div>
<div id="details555" style="display:none">
Some details
</div>
$("div[id^='item']").hover(function() {
$(this).find(".action").toggle();
}).delegate(".showDetails", "click", function(e) {
e.preventDefault();
$(this).parent().next("div").toggle();
});
Demo.
You could use the .hover function
with the toggle()
Look at this fiddle :
http://jsfiddle.net/ADLLR/