We Keep Coding

Toggle class doesn't work with push menu

Can you help me and tell me why this code doesn't work? On click '.push-button' it should open the '#push-menu' and that works but the other part of the doesn't work instead of showing the elements on the first click and then hiding the elements on the second click, it doesn't even show them when I open the menu it is empty, just white!
$(document).ready(function () {
$(".push-button").click(function () {
$("#push-menu").toggle(
function (){
$('.link-item-1').addClass('active-1');
$('.link-item-2').addClass('active-2');
$('.link-item-3').addClass('active-3');
$('.link-item-4').addClass('active-4');
$('.link-item-5').addClass('active-5');
}, function (){
$('.link-item-1').removeClass('active-1');
$('.link-item-2').removeClass('active-2');
$('.link-item-3').removeClass('active-3');
$('.link-item-4').removeClass('active-4');
$('.link-item-5').removeClass('active-5');
}
);
});
});

The problem is because the toggle() method no longer works in the manner you expect. It was changed several versions ago.
However, you can fix both the issue and massively simplify your code by using toggleClass() instead:
$(".push-button").click(function () {
$('.link-item-1').toggleClass('active-1');
$('.link-item-2').toggleClass('active-2');
$('.link-item-3').toggleClass('active-3');
$('.link-item-4').toggleClass('active-4');
$('.link-item-5').toggleClass('active-5');
});
I would also suggest you revisit the logic you're using with regard to the classes. They are supposed to group common elements, yet you have given each element its own unique class which is the complete opposite pattern.
To make that work you could then use the same class on all elements, eg. link-item, then identify them by index in either JS or CSS, whenever required.
$(".push-button").click(function () {
$('.link-item').toggleClass('active');
});

Jquery Function add class and remove class on multiple buttons but only execute specific button clicked

Hello I seem to be stuck on this certain code. I have multiple buttons on my website that when you click one, it changes classes & the text inside then revert back after clicking again. It seems to only work on one button but there are multiples of buttons with the same ID & when they are clicked nothing happens. Heres the codeenter code here
$('#btnInfo').click(function()
{
if ($(this).text() == "More Info")
{
$(this).text("Cancel").addClass('btn-danger');
}
else
{
$(this).text("More Info").removeClass('btn-danger');
};
});
Im not to sure only one button gets the function while the others stay the same when i click them but I want all the buttons to execute the code above but onlt to the button i specifically clicked with the ID

First, you cannot have more than one element with the same "ID", so use class instead.
I think what you want is to bind the event click to all your buttons, do this instead.
$('.className').on('click', function(e){
if ($(this).text() == "More Info")
{
$(this).text("Cancel").addClass('btn-danger');
}
else
{
$(this).text("More Info").removeClass('btn-danger');
};
});
Check the link for more info : http://api.jquery.com/on/

It's unclear what you are looking exactly
If you are looking for this functionality for all the buttons, you need something like this.
$('button').click(function() //see changed css selector
{
if ($(this).text() == "More Info")
{
$(this).text("Cancel").addClass('btn-danger');
}
else
{
$(this).text("More Info").removeClass('btn-danger');
};
});

Your selector is an id #btnInfo in the below line
$('#btnInfo').click(function()
This will select only one button. Use a class, .btnInfo and add it as class attribute to the buttons

Toggle focus to follow toggleClass

I'm doing a simple show/hide on a search form that uses jQuery's toggleClass() and CSS to show and hide the form. That's easy enough, something like:
$('#site-search-toggle').click(function(e){
$('#site-search').toggleClass('search-open');
e.preventDefault()
});
What I'd like to do but am having a hard time figuring out is to put focus on the search input when the form is shown and remove the focus from the search input when the form is hidden.
It's easy to add focus:
$('#site-search-toggle').click(function(e){
$('#site-search').toggleClass('search-open');
$('#site-search input[type="search"]').focus();
e.preventDefault()
});
But I'm stuck at how to remove it when $('#site-search-toggle') is clicked again to hide the form.

Just found this thread as I've been banging my head against this problem for a while now.
I've found a very simple way to do this, and essentially all you need to do is provide a click handler. When the element is clicked, you toggle the class which controls the 'focused' state, but you also programatically focus the element:
document.getElementById('myelement').addEventListener('click', function() {
this.classList.toggle('focus'); // or whatever...
this.focus();
});
You will need to give the element some sort of 'tabindex' value, probably 0 or -1.
And then, you provide a 'blur' handler, which just removes the 'focus' class whenver the user navigates away from the element.
document.getElementById('myelement').addEventListener('blur', function() {
this.classList.remove('focus');
return false;
});
Works like a dream!
I'm sorry that this is not a jQuery answer, but it should be easy enough to adapt - I just don't use it...
Danny

OK I figured this one out, or at least I found a way to do what I need to do. I added a second class, search-closed, toggled both classes, then used each class to focus or blur the field, something like this:
$('#site-search').addClass('search-closed');
$('.site-search__toggle').click(function(e){
// toggle both classes
$('#site-search').toggleClass('search-open search-closed');
// set focus when form is visible, .search-open
// use setTimeout to make sure the cursor actually gets in there
// don't know why, but it works
setTimeout (function(){
$('#site-search.search-open .site-search__input').focus();
}, 20);
// blur when the form is not visible, .search-closed
$('#site-search.search-closed .site-search__input').blur();
});

Try this:
$('#site-search-toggle').click(function(e){
$('#site-search').toggleClass('search-open');
if ($('#site-search').hasClass('search-open')) {
$('#site-search input[type="search"]').focus();
} else {
$('#site-search input[type="search"]').blur();
}
e.preventDefault();
});

Javascript function help needed

I'm trying to hide one div and show another, when a button is clicked. The button needs to change class after click.
I tried to change these this with toggleClass and toggleSlide, but it didn't work. Now I just try to show and hide divs onclick. It seems to work somehow, but removeClass won't work.
Can somebody understand what's wrong? Or is there better way to do it?
Maybe I can make it with toggle array or something, that simplifies the code or click counts (if count c++%2!=2), don't even know if that's possible.
$('div.more-lang').hide();
$('div.lang-arrow').click(function () {
$('div.lang-arrow').addClass('more');
$('#lang').hide('');
$('div.more-lang').show('');
});
$('div.lang-arrow.more').click(function () {
$('div.lang-arrow').removeClass('more');
$('div.more-lang').hide('');
$('#lang').show('');
});

This should work:
$("div.lang-arrow").on('click', function() {
$(this).toggleClass("more");
$("#lang").toggle();
});
http://jsfiddle.net/zmvQp/

Trying to toggle a panel whilst changing the icon to 'view more' and 'view less'

I've just started learning jQuery/javascript, so this might seem like a really basic question, but it's annoying me nevertheless.
I have a panel of 6 <li>s, 3 of which are hidden until clicking on the 'view more' link at which point the panel toggles to reveal the other 3. The icon is changing from 'more' to 'less', but then not changing back to 'more'. Can anyone see the problem in the code?
Any help would be greatly appreciated :)
Thanks,
David
$(document).ready(function() {
$('.allApps').hide();
$('.moreAppsIcon').click(function() {
$('.moreAppsIcon').removeClass("moreAppsIcon").addClass("lessAppsIcon");
$(this).toggleClass("active");
$('.allApps').slideToggle("slow");
return false;
});
$('.lessAppsIcon').click(function() {
$('.appsMore').slideToggle("slow", function () {
$('.appsMore').removeClass("appsMore").addClass("moreAppsIcon");
$(this).toggleClass("active");
return false;
});
});
});

It's easier to use .live() here, like this:
$('.moreAppsIcon').live('click', function() {
//and...
$('.lessAppsIcon').live('click', function() {
Otherwise your functions aren't being bound correctly. For example $('.lessAppsIcon') finds elements with that class at that time and binds a click handler to them...elements getting that class later don't get that click handler, whereas .live() works on the selector of the element at the time of the event, having the result you want.
So basically you're attaching n event handlers, one for each element matching initially...when you do .addClass() the other elements don't get that event handler all the sudden, it's on the DOM elements you initially found, not dynamically added to others when they change class. For the same reason .removeClass() doesn't remove the event handler. However, if you use .live() like above, it'll have the effect of changing event handlers like you're after.

I figured it out. It was pretty much what Nick was saying actually to do with the time of the event. I added an id to the <li> to handle the click event. This is what it looks like:
$(document).ready(function() {
$('.allApps').hide();
$('#moreOrLess').click(function() {
$('.allApps').slideToggle("slow", function() {
$('#moreOrLess').toggleClass("moreAppsIcon").toggleClass("lessAppsIcon");
$(this).toggleClass("active");
});
return false;
});
});
Cheers for the help though Nick :)