I have a simple dropdown list, I want when the user toggles the dropdown list to show or hide another div using the jquery method slideToggle, unfortunately, I am struggling to solve the problem.
Expected: when the user clicks an icon it should show the list and hide another div (slideDown effect) when the user clicks again for closing the dropdown list (slideUp effect), I want to show the hidden div.
var link = $('.sprzatanie-link');
link.click(function(e) {
e.preventDefault();
list.slideToggle("fast", function(){
console.log('do something')
if("slideDown"){
$('.dezynfekcja-dropdown').hide();
}else if("slideUP"){
$('.dezynfekcja-dropdown').show();
}
});
});
I tried adding a callback function but I don't know how to check the slide effect if it's slideDown or slideUp.
Any idea will be appreciated.
Once toggle finishes it basically hides or shows the element being toggled. So in the complete callback you can simply check if your element is shown or hidden.
var link = $('.sprzatanie-link');
link.click(function(e) {
e.preventDefault();
list.slideToggle("fast", function(){
// `this` refers to the DOM element being toggled.
// We can use `is(":visible")` to check if it visible or not
let isVisible = $(this).is(":visible");
// show console message that tells us if element is hidden or visible
console.log(this.innerText, ' is now ', isVisible);
// use isVisible to do whatever you want show/hide etc
if(isVisible) {
$('.dezynfekcja-dropdown').hide();
} else {
$('.dezynfekcja-dropdown').show();
}
});
});
Related
I have a div toggle when an anchor is clicked. I'm trying to change an icon via class when the div is visible, and when it's hidden, but the code's not working.
Does anyone know how to do this?
// Toggle design/code
$(".design-n-code").click(function(e) {
code.toggle();
}); code.hide();
// Handles the icon so users know it's active when code is visible.
if (code.is(':visible')) {
$(this).addClass('code-active');
} else {
$(this).removeClass('code-active');
}
You have to put the logic for checking the visiblity into the click handler. Otherwise, it will only execute once, and that is at the overall beginning of the script execution.
// Toggle design/code
$(".design-n-code").click(function() {
code.toggle();
// Handles the icon so users know it's active when code is visible.
if (code.is(':visible')) {
$(this).addClass('code-active');
} else {
$(this).removeClass('code-active');
}
});
code.hide();
The test for the visibility of the code should be in the handler. In the handler, this is referring to the clicked element, so you must call addClass / removeClass to the element #icon-id instead (adapt #icon-id to your proper id).
// Toggle design/code
$(".design-n-code").click(function(e) {
code.toggle();
// Handles the icon so users know it's active when code is visible.
if (code.is(':visible')) {
$('#icon-id').addClass('code-active');
} else {
$('#icon-id').removeClass('code-active');
}
});
code.hide();
You say you have an anchor which when clicked, toggles another element, a div. The use of 'this' when clicked won't change the other element's class then.
You would want something like this:
HTML
CLick me to toggle the other div
<div id="toBeToggled" class="IsShown">I have class abc</div>
JS
$('#toggler').click(function() {
var target = $('#toBeToggled');
if (target.is(":visible")) {
target.addClass('IsHidden').removeClass('IsShown');
target.hide();
// Demo purposes
console.log(target.attr('class'));
} else {
target.addClass('IsShown').removeClass('IsHidden');
target.show();
// Demo purposes
console.log(target.attr('class'));
}
});
JS FIDDLE EXAMPLE
i have a horizontal list menu which when clicked toggles the visibility of a nested list. the function almost works, i click the menu and the visibility toggles. however, when i click inside the element that has just appeared, the visibility of the nested list reverts back to original state and is hidden. this is a bit difficult when the elements require an interaction (whether it's a form or another menu).
Here's the code i've got so far:
/* menu */
var menu = function(clicktarget, dropdown){
$(clicktarget).click( function(event){
// stop bubbling
event.stopPropagation();
//show
$(dropdown).toggle();
return false;
});
$('body').not($(dropdown)).click( function(){
//hide when click anywhere out the menu
$(dropdown).hide();
return false;
});
}
menu($('#loginAcc'),$('#auth-menu'));
As you can see i have tried using the .not() function in an attempt to remove it, but nothing changes and the dropdown still gets removed when it's clicked.
Try
$('body').click( function(e){
//hide when click anywhere out the menu
var $target = $(e.target)
if(!$target.closest(dropdown).length){
$(dropdown).hide();
}
return false;
});
I have an image gallery. clicking on any image opens a modal window with the clicked in image.
I want to hide the modal window. i know how to do it by putting a close button. But i don't want to add any close button. what i am trying to do is whenever a user click anywhere other then following div gallery-image gallery-control-previous gallery-control-next the modal window should get hidden.
can anyone suggest me how to achieve this.
Here is my jsFiddle
Demo
Hide on clicking other than navigation keys
$('.gallery-overlay').click(function(event){
if($(event.target).hasClass('gallery-control') ==false){
$(this).hide();
}
});
Hide on clicking other than image and navigation keys
$('.gallery-overlay').click(function(event){
if($(event.target).hasClass('gallery-control') ==false && $(event.target).hasClass('gallery-image') == false){
$(this).hide();
}
});
you can use fadeout('slow') instead of hide for giving good effects
Here is the
jsFiddle..
add this to end of your jquery code.
$(".gallery-overlay").click(function(e) {
if($(e.target).hasClass("gallery-image") || $(e.target).hasClass("gallery-control-next") || $(e.target) .hasClass("gallery-control-previous")){/**/}
else {$(".gallery-overlay").fadeOut("2000");
}
});
e.target gives the actual clicked area, within .gallery-overlay. $(this) doesn't work.
You can slow down the rate of fading of modal window by increasing time. Here it is 2000, i.e.2 seconds.
Just add the following to your code:
$('.gallery-overlay').click(function() {
$(this).fadeOut('slow');
});
$('.gallery-image').click(function() {
return false;
});
You will also need to add return false at the end of your click handlers for .gallery-control-previous, .gallery-control-next and .gallery-image so that the event doesn't propagate to .gallery-overlay.
Updated fiddle.
Simply add a click event to fadeOut() the .gallery-overlay onclick.
View the JSFiddle for an example
Then for your .gallery-captionbox and .gallery-image, add a click event and return false on them.
// Hide the gallery on click
$('.gallery-overlay').click(function(){
$(this).fadeOut();
});
// Return false on click of the caption box or the image itself
$('.gallery-captionbox, .gallery-image').click(function(){
return false;
});
// All your other code below
View the JSFiddle
Try,
$(document).click(function(e) {
if( e.target.id != 'yourDivId') {
$("#yourDivId").hide();
}
});
I am trying to create divs dynamically and display them. When I try to hide the created divs //First function is working perfect, but that is not what I want. I am defining a close button and I want the div to hide when the close button is cliked. While running the //Second function, after clicking the parent div, it hides all its child divs. I.E. When I click on the 1st div it hides all the divs called after that.
Code:
var newImageBoxdiv = $(document.createElement('div')).attr({ class:"demo"+i, id:"image"});
newImageBoxdiv.html("<img id='MyImage' src='"+d+"'><div class='ImageWindowCloseButton' ></div>");
newImageBoxdiv.insertAfter('.demo');
$('#image').show();
i++;
//First Function
$('#image').click(function(event){ //Works Perfect
$(newImageBoxdiv).hide();
event.stopPropagation();
event.cancelBubble = true;
});
//Second function
$('.ImageWindowCloseButton').click(function(event){ // Deletes Child element when clicked on parent
$(newImageBoxdiv).hide();
event.stopPropagation();
event.cancelBubble = true;
});
$(this).parent(newImageBoxdiv).hide();
I have code that lets me to show an element on click of one element and hide it on click of another. Code looks like:
$('.downloads').hide()
$('.downloads').css({visibility:'visible'})
var Dshow=false;
$('.allLink').click(function() {
if(!Dshow){
Dshow=true;
$(".downloads").fadeIn("fast");
$('#footer2').html($('#footer1').html());
$('#footer1').html('');}
});
$('.hideAllLink').click(function() {
if(!!Dshow){
Dshow=false;
$(".downloads").fadeOut("fast");
$('#footer1').html($('#footer2').html());
$('#footer2').html('');}
});
I want $('.allLink').click(function() to have 2 states - on first click it shall show ".downloads" and on second click hide.
How to do such thing with jQuery?
You can use .toogle(). This method will hide element if it's visible, or make it visible if it's hidden.
$('.allLink').click(function()) {
$('.downloads').toggle();
}
I think what you are looking for is a toggler: Use of jQuery toggle function
Use
$( "#idofthebutton" ).toggle(
function() {
/// hide the link
$(".downloads").fadeOut("fast");
}, function() {
///show the link
$(".downloads").fadeIn("fast");
}
);
This will work automatically to hide and show the links....
Note: In this case keep the links visible at first place. If you don't want that then change the order of the functions inside the .toggle