Afternoon, fellow overflowers. I have a relatively simple question but cannot wrap my head around what needs to be done. So I am using glyphicons/font awesome as collapsible arrows and need the up and down arrows to swap on click. So on clicking the tag, remove down and add up. On the next click remove up and add down classes. Any ideas? Thanks in advance.
$('.accordion-toggle > i').click(function(){
var open = $(this).removeClass('fa-chevron-down').addClass('fa-chevron-up');
$.toggle('open');
});
toggleClass does that. If you start out with one class, that class will be removed (toggled) and the class the element doesn't have will be added, hence toggleClass
$('.accordion-toggle > i').click(function(){
var open = $(this).toggleClass('fa-chevron-down fa-chevron-up');
$.toggle('open');
});
You can check if it has a class first with:
if ($(this).hasClass("fa-chevron-down")) {
// add and remove classes
} else {
// add and remove classes
}
and then remove and add the appropriate classes in the if statement.
Related
This is doing my head in. Sorry if it's a schoolboy error. I have a very straight forward jquery accordion and I can toggle a style on the clickable header for each content by adding a class, but the class does not go when I click to collapse that element itself, only when I expand a sibling. I've popped this on jsfiddle with a simple colour switch.
$(document).ready(function ($) {
$('#showHideAccordion').find('h2').click(function () {
$('.active').removeClass('active');
//Expand or collapse this panel
$(this).next().slideToggle('slow');
$(this).toggleClass('active');
//Hide the other panels
$(".podContent").not($(this).next()).slideUp('slow').removeClass('active');
});
});
http://jsfiddle.net/wf73o6c6/
When you click the already active item, you remove the active class from it with this line:
$('.active').removeClass('active');
then you add it again with this line:
$(this).toggleClass('active');
Making this change to the first line will fix it:
$('.active').not($(this)).removeClass('active');
This way you remove the active class from all the other items, and with the toggleClass line that comes after, you remove the class from the clicked item.
You don't need to remove the class again on your last line, you already took care of that (I see you already used the .not() function here, so your mistake was probably just lack of attention).
$(".podContent").not($(this).next()).slideUp('slow');
Also, unrelated, but why $('#showHideAccordion').find('h2') and not just $('#showHideAccordion h2') ?
Here's an updated fiddle: http://jsfiddle.net/wf73o6c6/2/
I am having trouble getting a click event to work on a page. I have a Div with an ID of 'icon', and the class of 'lock', and I want to be able to click on this Div's background image to change the class from 'lock' to 'locked'.
Before any confusion happens, I have both classes in my external CSS file, and they add a background image to the Div. Also, I don't want to use JQuery, but addEventListener with a function. so far, this is what my JS looks like:
var elLock = document.getElementById('icon');
function changeLock(){
var imgSwitch = elLock.getAttribute('class');
if(imgSwitch !== 'unlock'){
elLock.className = 'unlock';
}else{
elLock.className('lock');
}
}
elLock.addEventListener('click', changeLock, false);
The desired result is what is in this youtube video: https://www.youtube.com/watch?v=oI2sRCN7CiM
Any help would be greatly appreciated. I would love to learn from mistakes i've made.
I would use the Element.classList property rather than what you're doing here ...
Then you could simply do:
elLock.addEventListener('click', function() {
elLock.classList.toggle('lock') },
false);
and leave unlock as a default class on the element. Every time you click on the element, it will toggle the lock class on-and-off, and you can use the cascading properties of CSS to override the background properties that are on your default unlock class.
Change an element's CSS with Javascript may provide some help, although it does reference to jQuery. Element.className could be what you need, or element.classList.
I'd check if the current class is 'unlock'. If one class is considered a default, the other class can toggle. Using CSS's cascading properties will allow the toggling class to override the default when it is present.
Alternatively you could remove the currently applied class and apply the other.
if (elLock.classList.contains('unlock')) {
elLock.classList.remove('unlock');
elLock.classList.add('lock');
}
else {
elLock.classList.remove('lock');
elLock.classList.add('unlock');
}
I have created a vertical slider and I want the classes to move onto the next div on click (next) and previous on click (prev)
here is my code and fiddle
$(".bxslider-inner:nth-child(4n+1)").addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").addClass('Blur3');
$("a.bx-next").click(function(){
$(".bxslider-inner:nth-child(4n+1)").next().addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").next().addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").next().addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").next().addClass('Blur3');
});
$("a.bx-prev").click(function(){
$(".bxslider-inner:nth-child(4n+1)").prev().addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").prev().addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").prev().addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").prev().addClass('Blur3');
});
Classes seem to be colliding with each other. I'd suggest cleaning current classes before adding the 'blur' classes, e.g. :
$(".bxslider-inner:nth-child(4n+1)").next().removeClass().addClass('bxslider-inner').addClass('noBlur');
etc... Problem is it only works for he first click on the button, as
$(".bxslider-inner:nth-child(4n+1)").next()
Will always be the same element. You now need to find a way to fetch the right elements on your click function.
Some elements here : In bxslider i want to add a class on current slide
They seem to be on the same level of the DOM tree, so you would use:
$(this).next().click();
I'm using this code to change my buttons's class:
$('button').on('click', function(){
var btn=$(this);
if(btn.attr('class')=='tct-button'){
btn.removeClass('tct-button').addClass('tct-button2');
}
else{
btn.removeClass('tct-button2').addClass('tct-button');
}
});
The problem is that I have multiple div's with multiple buttons in each. I need to change this so that every time I click on a button in a div the others which were changed by a previous click (in that same div) change back to the default class which is 'tct-button', and just the last clicked button turns to 'tct-button2'. Would you please help me.
use toggleClass in jquery ,there is no need to check hasClass()
$(this).toggleClass("tct-button2 tct-button");
DEMO
Use hasClass()
Determine whether any of the matched elements are assigned the given class.
Code
$('button').on('click', function(){
var btn=$(this);
if(btn.hasClass('tct-button')){
btn.removeClass('tct-button').addClass('tct-button2');
}
else{
btn.removeClass('tct-button2').addClass('tct-button');
}
});
However I think you need
$('button').on('click', function(){
$('.tct-button2').removeClass('tct-button2'); //Remove all class
$(this).addClass('tct-button2'); //Add the class to current element
});
If you want to add an additional class to your buttons (tct-button2) whilst keeping tct-button on every button you could do what Satpal suggested.
However, from the sounds of it and I may be wrong, if you want to change the classes so that each button only has one class at a time on it (either tct-button or tct-button2) you can do similar to what Satpal suggested and use:
$('button').on('click', function(){
$('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Add original class and Remove tct-button2 class
$(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});
Here is the example http://jsfiddle.net/lee_gladding/xao46uzs/
to only affect buttons in the div the clicked one belongs to, use a similar method to:
$('button').on('click', function(){
$(this).parent('div').find('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Remove all class in that div
$(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});
(You might want to use a better selector for the parent, possibly a class or what ever your actual html uses)
Example:
http://jsfiddle.net/lee_gladding/xao46uzs/3/
I have a navigation menu with about 10 items, and I put together this code to update the links for which is selected and which is not. It manually updates classes. The problem is, as you can probably tell, its inefficient and its a pain to update. Is there a better way of doing it?
$('#Button1').click(function(){
$('#Button1').addClass("selectedItem");
$('#Button2').removeClass("selectedItem");
$('#Button3').removeClass("selectedItem");
$('#Button4').removeClass("selectedItem");
$('#Button5').removeClass("selectedItem");
$('#Button6').removeClass("selectedItem");
$('#Button7').removeClass("selectedItem");
$('#Button8').removeClass("selectedItem");
$('#Button9').removeClass("selectedItem");
$('#Button10').removeClass("selectedItem");
});
You could try something like this -
$("[id^='Button']").removeClass("selectedItem");
$('#Button1').addClass("selectedItem");
This will first remove all the selectedItem classes from any element which has an id attribute starting with "button". The second command then adds the class to Button1
You could also simply bind all the elements with the same handler like this -
var $buttons = $("[id^='Button']");
$buttons.on('click', function ()
{
$buttons.removeClass("selectedItem");
$(this).addClass("selectedItem");
});
For each element, when clicked, the class will be removed - the element that was clicked with then have the class added.
Checkout the Attribute Starts With Selector [name^="value"] selector.
I would suggest using classes because this is exactly what they are for - to denote groups of elements. While you can easily select your buttons using the method proposed by Lix (and you should use this method if you can't modify HTML), using class is a more unobtrusive:
var $buttons = $('.button').on('click', function() {
$buttons.removeClass('selectedItem');
$(this).addClass('selectedItem');
});
Meta example: http://jsfiddle.net/88JR2/
You could have a class .button and apply it to all your buttons then
$('#Button1').click(function(){
$('.button').removeClass("selectedItem");
$('#Button1').addClass("selectedItem");
});