I have a pagination, and my pagination is not using any plugin, I just create it by myself. But, I have a problem, how can I give a class='active' when the button is clicked. I just using function in my pagination. Please help, thank you.
$(document).on('click','your-element-class', function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
When the element is clicked, if it already has the active class, it will be removed; otherwise it will be added.
Related
I am working on a click event, which intially is pretty standard.
on.click: Remove the active class from all list items, then add active to the clicked list item.
ie
var li = $('.child-item');
li.click(function(){
li.removeClass('active');
li.addClass('active');
});
Works as expected. However, I also need a condition that if the active class is clicked again, it will remove the active class from the clicked item.
I tried this:
$('.child-item').toggle(function(e){
$('.child-item').removeClass('active');
$(this).addClass('active');
}, function() {
$('.child-item').removeClass('active');
$(this).removeClass('active');
});
but often the toggle is in the off state, so it requires a double click to get the toggle back on track. This seems like it would be a pretty straightforward solution, but I cannot seem to get it to work.
Added a jsFiddle here with another option. This is fine for when the same element is clicked, but it doesn't clear all active classes on each click.
Update
I got it working but TrueBlueAussie's answer is shorter and better. Here is my working fiddle:
https://jsfiddle.net/v7b8cbj5/
Your second click handler will only attach to matching "active" items when the event was registered.
Replace it all with just this:
$('.child-item').click(function(e){
$('.child-item.active').not(this).removeClass('active');
$(this).toggleClass('active');
});
You can use not() to exclude the current item from selected list of things to make inactive, then just toggle the selected one.
JSFiddle: https://jsfiddle.net/81ex7dmm/2/
.toggle() (Event) - is deprecated in jQuery 1.8 and removed in jQuery 1.9
Use add() with toggleClass() on .active <li>
$('.child-item').click(function(e){
$('li.child-item.active').add(this).toggleClass('active');
});
Updated Fiddle
var li = $('.child-item');
li.click(function(){
li.removeClass('active');
$(this).toggleClass('active');
});
Try it also :
$('.child-item').click(function(e){
$('.child-item.active').removeClass('active');
$(this).addClass('active');
});
FIDDLE DEMO
I created this slide menu, activated by a button. I'm using toggle(); to do that. But, I need two CSS effects: fadeIn and fadeOut.
So, I put addClass(); to solve the problem. Sucess! But I can't do the same to fall the menu back. For example: Click on the button and add FadeIn class. The menu appears. Then, you have to click on the same button again, To remove fadeIn class and add the fadeOut class.
This is my actual code:
$(function(){
$('.menu-btn').click(function(){
$('.leftmenu').toggle();
$('.leftmenu').addClass('fadeInLeft animated');
});
});
And here my working example http://jsfiddle.net/N8S9y/
Any help will be much appreciated. thanks in advance!
This will work for you
$(function(){
$('.menu-btn').click(function(){
$('.leftmenu').toggle();
if($('.leftmenu').hasClass('fadeInLeft'))
{
$('.leftmenu').removeClass('fadeInLeft').addClass('fadeOut');
}
else
{
$('.leftmenu').removeClass('fadeOut').addClass('fadeInLeft');
}
});
});`
I think you're looking for .toggleClass():
$('.leftmenu').toggleClass('FadeIn fadeOut');
I've written up this code to add a class (.box-open which adds display:block) to my box (.sharebox) when a button (#share-but) is clicked but the problem is I'm having trouble making this only apply to one .share div at a time because everytime I click a button, all the .shareboxs get the class .box-open applied to it.
function shareBox() {
$('.share').each(function( index ) {
$(this).on('click', '#share-but', function() {
if ($('.sharebox').hasClass('box-open')) {
$('.sharebox').removeClass('box-open');
}
else {
$('.sharebox').addClass('box-open');
}
});
});
}
shareBox();
Here is an image of the problem (I'm building a Tumblr Theme). Hopefully it's a lot easier to understand. http://24.media.tumblr.com/c5c4252607bf4a9905c7c9de5b592c60/tumblr_ml4t2fSuQo1rqce8co1_500.png <---- This happened when I clicked one of the buttons, but I only want one .sharebox to have the class .box-open added to it when I click the #share-but inside the same .share div.
I hope all of this made sense. I'm still very noob at Javascript/Jquery as I only started learning like 2 weeks ago so any help is much appreciated!
You have to use $(this) instead of $('.sharebox') to address source of event
$('.sharebox').addClass('box-open');
Would be
$(this).addClass('box-open');
The id of element is supposed to be unique in document so you can bind click directly to '#share-but', if it is not unique you can bind it like this.
$('.share').on('click', '#share-but', function() {
if ($('.sharebox').hasClass('box-open')) {
$('.sharebox').removeClass('box-open');
}
else {
$('.sharebox').addClass('box-open');
}
});
You can use toggleClass to make it simple, I assume you have single item with id #share-but,
$('#share-but').click(function(){
$(this).toggleClass("box-open");
});
This would be a simpler version, you can toggle the classname :)
$('.share').on("click", "#share-but", function() {
$(this).find(".sharebox").toggleClass('box-open');
});
Im trying to say that, if my div doesnt have the class active add it. And if it does have the class active, remove it.
Ive the following, only my code adds the class, then continues the query and removes it at the end, what would the best solution be, 2 seperat click funcitons?
$('.work-showcase').click(function(){
if ( !$(this).hasClass('active') ){
$(this).addClass('active');
} else {
$(this).removeClass('active');
};
});
Use toggleClass method:
$(".work-showcase").click(function() {
$(this).toggleClass("active");
})
$("#YourID").removeClass('ClassName');
$("#YourID").addClass('ClassName');
I'm trying to create a JQuery Dropdown similar to the one used in bootstrap.
The problem which arises is that when an individual list item is clicked, all sub navigation's display block.
Now I know this issue can be resolved with .each() but my code does not seem to work.
Please find the example here; http://jsfiddle.net/N7xgC/
Apologies if this question has already been asked before.
B
Try this modification:
http://jsfiddle.net/N7xgC/1/
$(function() {
$('.main > li > a').each(function() {
$(this).click(function() {
// When the anchor is clicked, find the next .sub element and toggle it
$(this).next('.sub').toggle();
});
});
});
I changed yours to toggle the element with the class .sub 'next' to the clicked anchor.
You cannot select all .sub and toggle them. You need to get only the one next to the a-element that is clicked.
Try this instead:
$(this).next(".sub").toggle();
Updated your fiddle so you can see it in action: http://jsfiddle.net/N7xgC/3/
$('.main li a').on('click', function() {
$(this).next('.sub').toggle();
});
JSFiddle Demo