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
Related
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();
}
});
});
I have a Li element (dropdown) that gets an Active class when parent div (button) is clicked. When this element have this class I want to give another div the same class. When the li element (dropdown) is clicked again the active class is removed, I then want to remove the active class on the second div aswell.
What I got so far:
$('document').ready(function() {
if ($('li').hasClass('active')) {
$("#site-overlay").addClass("active");
}
});
This works a bit on the way in console- it gives my second div the correct class. It doesnt work live though, I guess I cant just call it on pageload? It also doesnt remove the class.
$('li').on('click', function(){
if($(this).hasClass('active')) {
$("#site-overlay").addClass("active");
} else {
$("#site-overlay").removeClass("active");
}
});
Your current example is not setting the active class on the LI elements, so nothing happens, but it should work something like this:
$(function () {
$('ul.megamenu > li').on('click', function () {
$("#site-overlay").toggleClass("active", $(this).hasClass('active'));
});
});
toggleClass can take a second boolean parameter that controls turning on/off the class based on a true/false value.
Note: I hacked the following JSFiddle just to show something working (the clicking just toggles the site-overlay state for now):
https://jsfiddle.net/TrueBlueAussie/doxdmxmL/16/
I'm using the bootstrap accordion and want to change the accordion-heading background on click, and it works fine when you have to click to close a accordion-group, but when the accordion-group close automatically when you click another it fails. I'm checking for the "in" class that change automatically.
$( ".accordion-group div" ).click(function() {
if ($(".accordion-group div").hasClass( "in" )) {
$(this).css("width","110%");
} else {
$(this).css("width","80%")
}
});
https://jsfiddle.net/bg250Lhe/
This is somewhat ugly, but it works. You can probably find out what gets passed to the methods and simplify selectors with that.
$('#accordion2').on('hidden.bs.collapse shown.bs.collapse', function () {
$(this).find('.accordion-heading a').removeClass('bigger');
$(this).find('.accordion-body.in').prev('.accordion-heading')
.find('a').addClass('bigger');
});
Demo
I've looked around and researched why this isn't working, but it seems that I am in a sort of different situation.
I have a default action for a navigation item that handles the navigation animation on hover:
$('.logoCont').hover(function(){
someFunction()...
}, function (){
someFunctionReverse()...
});
Now, when it comes to being on the mobile screen, I hide the navigation and place a button there. The button then controls the animation of the menu sliding out from the side. I've added a line of code that adds a class to the navigation elements when this button is clicked.
$('.mobile-menuButton').click(function(){ //When you click the menu-show button
if($(this).hasClass('menuClosed')){ //Check to see if the menu is closed
$('.nav_hover').addClass('mobile_open'); //Add the mobile_open class to the navigation items
} else {
$('.nav_hover').removeClass('mobile_open'); //remove it
}
});
So then I changed the first hover function to say:
$('.nav_hover').not('.mobile_open').hover(function(){
someFunction()...
}, function (){
someFunctionReverse()...
});
I was hoping this would stop the someFunction() from happening when the mobile menu is out.
You can view what I'm doing HERE - When you reduce the screen to under 540px the media query will take effect and you can click on the menu button.
Documentation on .not() HERE. The second example at the end of the page is exactly what I was hoping for.
The class is added later and the event handler is attached to any and all elements that match the selector at pageload (or whenever it is executed) and doesn't really care about what you add later.
You have to check for the class inside the event handler
$('.nav_hover').hover(function(){
if ( !$(this).hasClass('mobile_open') ) {
someFunction()...
}
}, function (){
if ( !$(this).hasClass('mobile_open') ) {
someFunctionReverse()...
}
});
delegation could also work, but it wouldn't really work with not() or hover()
$(document).on({
mouseenter: function() {
someFunction()...
},
mouseleave: function() {
someFunctionReverse()...
}
}, '.nav_hover:not(.mobile_open)');
Let me define the problem a little bit more:
i have
<div class="contact">
<div id="form"></div>
<div id="icon"></div>
</div>
i want onclick on #icon, to change the class of .contact to .contactexpand( or just append it).
Then i want that the on body click to change the class back, but of course that shouldnt happen when clicking on the new class .contactexpand, and if possible that clicking on icon again changes the class back again.
I tried numerous examples and combinations but just couldn't get the right result and behavior.
Check this: Working example
Let's go step by step
I want onclick on #icon, to change the class of .contact to .contactexpand( or just append it). […] and if possible that clicking on icon again changes the class back again.
You want to use the toggleClass() method to achieve this. Simply:
$('#icon').on('click', function(e){
$(this).parent()
.toggleClass('contact')
.toggleClass('contactexpand');
});
Then i want that the on body click to change the class back
You will have to make sure that body removes contactexpand class and adds contact. At this point I would just give the container element an id (or class if you prefer), just to make things simpler. Then what you do is pretty simple:
$('body').on('click', function(e){
$('#thisdiv')
.removeClass('contactexpand')
.addClass('contact');
});
but of course that shouldnt happen when clicking on the new class .contactexpand.
This is the step that the other answers missed, I think. Since everywhere you click, you also click on the body element, you will always trigger the click event on the body, hence removing the contactexpand class and adding the contact one.
Enter event.stopPropagation(). This method will make sure that the events doesn't bubble up the DOM, and will not trigger the body click.
$('#thisdiv').on('click', function(e){
e.stopPropagation();
});
Working example
You can add a class to parent element like the following code.
$(".contact #icon").click(function(){
var element = $(this).parent(".contact");
element.removeClass("contact").addClass("contactexpand");
});
I like to the jQuerys toggleClass function like so:
$('#icon').click(function(){
$('#contactbox').toggleClass('contact');
$('#contactbox').toggleClass('contactexpand');
});
Or you could use addClass('className') and removerClass('className') if you would like to apend it rather than toggle it :)
Here is an example: http://jsfiddle.net/aUUkL/
You can also add an onclick event to the body of the page and use hasClass('className') to see whether or not to toggle the class when the body is clicked. You could use something like this (Although I havent tested this bit!):
$('body').click(function(){
if( $('#contactbox').hasClass('contactexpand') ){
$('#contactbox').addClass('contact');
$('#contactbox').removeClass('contactexpand');
}
});
You can do this
$('body').on('click', function(event) {
if ($(event.target).attr('id') == 'icon') {
$(event.target).parent().toggleClass('contactexpand');
} else {
$('.contact').removeClass('contactexpand');
}
});
Check out this jsfiddle
var $contact = $('.contact');
$contact.find('#icon').click(function(e, hide) {
e.stopPropagation();
$contact[hide ? 'removeClass' : 'toggleClass']('contactexpand');
});
$(document).on('click', function(e) {
if (e.srcElement === $contact[0]) return;
$contact.find('#icon').trigger('click', true);
});
http://jsfiddle.net/kZkuH/2/