I have a block of repeating images, each with a caption underneath. I am using slideToggle to show and hide the caption for each image when the image is clicked.
$('.imageholder').click(function() {
$(this).next().slideToggle("fast");
});
A working fiddle showing my method is here.
This works as it should but I want to prevent multiple captions from being visible simultaneously. As a user clicks an image, any open captions should close. In my example, you will see it is possible to open all captions. This is what I want to prevent.
Would appreciate a nudge in the right direction. Thanks.
Just do something like this?
$('.imageholder').click(function() {
$('.description').slideUp();
$(this).next().slideToggle("fast");
});
You should try hiding the other visible elements:
$('.imageholder').click(function() {
$('.description:visible').not($(this).next()).slideToggle("fast");
$(this).next().slideToggle("fast");
});
slideUp() all descriptions that aren't the current one, then slideToggle() the current one.
$('.imageholder').click(function() {
var $desc = $(this).next();
$('.description').not($desc).slideUp('fast');
$(this).next().slideToggle("fast");
});
Related
I have created a page where I have showing multiple boxes, and each box have three vertical dots on top right corner, when you click on those three dots it will open sub menu, for which I have used slidetoggle and what I wanted is when user click on the dots from one box it should show at once place only but right now its showing on all boxes, the jQuery I have written is not working as expected.
Here is the JSfiddle demo
For slide toggle I have the following JQuery:
$('.popout_info > a').click(function () {
$(".popout_info").next().slideToggle(200);
});
Can anyone please suggest how to handle this, if I assign ID to each DIV then in this case the boxes are going to be in unlimited numbers, may be something which can be handled dynamically?
Thanks in advance!
You have to change your jQuery function to achieve that as:
jQuery
$('.popout_info > a').click(function() {
$('.popout_list').slideUp(200);
var nextPopup = $(this).parent(".popout_info").siblings('.popout_list');
if (!($(nextPopup).is(':visible'))) {
$(nextPopup).slideToggle(200);
}
});
Here's your updated JSFiddle
I have made some amendments to hide any other open popup if one popup opens to disallow redundancy.
You are selecting every popup window. Try using :
$('.popout_list').slideUp(200);
$(this).closest('.doctor_wrapper').find('.popout_list').slideToggle(400);
You can use the following code to achieve this.
JS
$('.popout_info > a').click(function () {
$(this).parent().parent().find(".popout_info").next().slideToggle(200);
});
Or try this link
https://jsfiddle.net/wo1b58wj/7/
I used:
$('.popout_info > a').click(function () {
$(this).parent().next().slideToggle(200);
});
and it worked for me.
Side note: it's hard to click on those three dots because the box resize on mouse enter/leave
I am creating a menu with two dropdowns. I need the dropdowns to open when the menu item is hovered over, but close if the other menu item is hovered over.
The problem I am having is getting the first dropdown to close if I hover over the second menu item.
Please see my fiddle here: http://www.bootply.com/uEKWCdNj4C
I've looked through other questions, and this one seems to possibly be of use, but I'm having trouble applying it to my situation: Vertical Menu to stay open on hover then close when another is hovered
So I apologize if this is a duplicate...any help would be appreciated. Thanks!
You can call slideup on the open ul before calling slidedown on the current one. like below
$(document).ready(function () {
$(".nav-basic").hover(function () {
$('ul.menu-applied').slideUp('medium');
$('ul.menu-basic').slideDown('medium');
});
$('ul.menu-basic').bind('mouseleave', function(){
$('ul.menu-basic').slideUp('medium');
});
$(".nav-applied").hover(function () {
$('ul.menu-basic').slideUp('medium');
$('ul.menu-applied').slideDown('medium');
});
$('ul.menu-applied').bind('mouseleave', function(){
$('ul.menu-applied').slideUp('medium');
});
});
You just needed to update your script to call the slideUp function:
$(".nav-basic").hover(function () {
$('ul.menu-basic').slideDown('medium');
$('ul.menu-applied').slideUp('medium');
});
$(".nav-applied").hover(function () {
$('ul.menu-basic').slideUp('medium');
$('ul.menu-applied').slideDown('medium');
});
Your code could use some optimization, but you could basically call slideUp() on all other $(.menu-interior') elements that are not of the target class:
Example: $('.menu-interior:not(.menu-basic)').slideUp();
See forked fiddle here: http://www.bootply.com/DZxktgUtjh
Note: This will close ANY other open menu, rather than having to hard-code all other classes when the menu grows.
So set an class="isHovered" on the element that is hovered.
Set the boxes class="isHovered" aswell ..
If hover is called again , or lets say mouseenter, you check if isHovered is set on the current box and on the other box ... or iterate over any boxes there might be ...
You could aswell store the currently hovered element id in a variable and the box id. Then use these values. As JS is not multithreaded you can rely on the order of execution ...
$(document).ready(function() {
$(".nav-basic").hover(function() {
$('ul.menu-basic').slideToggle('medium');
});
$(".nav-applied").hover(function() {
$('ul.menu-applied').slideToggle('medium');
});
});
I have an issue with jQuery's .hover() method. I have a few paragraphs inside a tags which I use as a menubar. What I intend to do is, if I hover one of these menulinks, a new element gets displayed over the menulink which contains links to submenu links. The problem is, that the .hover() stops working immediately.
I did a simple FIDDLE to show my problem.
Any help is much appreciated.
Edit: Worth to say is, that I also want the sublinks to be clicked, so the hover must be still working then. It only stops when I leave the red div.
What about this?
$('p').hover(function() { $('div').fadeIn(); }, function() { });
$('div').hover(function() { }, function() { $('div').fadeOut(); });
Demo fiddle: http://jsfiddle.net/lparcerisa/1urs0wfr/2/
i have link and on link hover display div when leave cursor form div and link hide div using jQuery. i have code for display it, how can i hide it while i leave cursor from these link and div.this is my html code.
2 items
<div id="dropcart">contents</div>
<script type="text/javascript">
$(document).ready(function(){
$("#show_div").hover(function(){
$("#dropcart").fadeIn();
});
});
$("#show_div").hover(function(){
$("#dropcart").fadeIn();
});
$("#dropcart").mouseleave(function(){
if($("#show_div").is(':hover') === false)
$("#dropcart").fadeOut("fast");
});
demo
EDIT: (For the downvoters and OP)
I misunderstood the question. My suggestion, then, would be to use timeouts.
.hover(function(){ clearTimeout(window["timeoutVar"]); $("#dropcart").fadeIn(); },function(){window["timeoutVar"]=setTimeout(function(){ $("#dropcart").fadeout(); },50);});
Then apply that .hover to the div, also. That way, the div will fade out after a 50-millisecond delay IF the user does not hover over it, which will cancel the timeout (and prevent the fadeout).
I'm really new to Jquery so I really need a some help from you guys.
I have created a button, when clicked a pop up menu will appear. Now I have created a script, what it does is when that button is clicked the sideshow on the site background will be hidden (this is to make the pop up menu much smoother), my question is after a user closes down the pop up menu, how can I reshow the hidden slideshow again , I believe it has something to do with this code onHide: function()
<script>
jQuery(document).ready(function(){
jQuery('.menubutton').click(function(){
jQuery("#slideshow").css({"display":"none"});
});
});
</script>
To show and hide alternatively use .toggle()
jQuery("#slideshow").toggle()
Demo: Fiddle
To Hide an element use .hide()
jQuery("#slideshow").hide()
To Display a hidden an element use .show()
jQuery("#slideshow").show()
I believe jQuery.toggle() is what you are after:
jQuery(document).ready(function () {
jQuery('.menubutton').click(function () {
jQuery('#slideshow').toggle();
});
});
Fiddle: http://jsfiddle.net/QGdLw/1/