Toggle class doesn't work with push menu - javascript

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');
});

Related

How to restart the Jquery events, to avoid the repetition of each one of them?

I have an index page that contains the following events.
<div id="sub_page"></div>
$(document).ready(function () {
$("a.menu_navegacion_abrircaja").on('click', function (ev) {
ev.preventDefault();
var href = “nombrecontrollerEJ/view_ej";
$.post(href, function (data) {
$("#sub_page").html(data);
});
});
});
In it, when you click, load the html contents of subpages in the div sub_page.
In view view view_ej, I bring html code and also, jquery code. The Jquery code of the view that is added to the index div is as follows:
$(document).ready(function () {
$('#modal_establecer_turnos').on('hidden.bs.modal', function () {
alert("hello");
});
});
By clicking on the link that contains the class "menu_navegacion_abrircaja", I get the alert ("hello");
But it turns out that there is a problem, for every time I click on the link, the alert messages are repeated (alert ("hello");). For example, the first time I click on the link that contains the class menu_navegacion_abrircaja, it works fine showing the alert once, but then I click again on the same link it shows me the alert twice, then I do it for the third time, He shows me three times the alert, and so on.
I would like to know how to solve this problem.
Will there be any way to restart the events or handler of the jquery, as are the events click, change, "hidden.bs.modal", etc., in such a way that their repetition of the events is avoided?
I have seen the methods unbind (), bind (), off (), which might be the solution, but if so, how could you apply them?
Maybe you could try something like this in the jQuery code of your subpage:
$(document).ready(function () {
$('#modal_establecer_turnos').off('hidden.bs.modal');
$('#modal_establecer_turnos').on('hidden.bs.modal', function () {
alert(“hello”);
});
});

Why toggle effect not working for nested div using angular Directive

I have attached the Plunker. I am unable to access .gc and .mc element . Although my code is working partially and class .bc is working as expected. I am trying to apply toggle effect on them and hierarchy wise
BroadCategory > GeneralCategory > MainCategory
Not sure what am I missing in
$(element).find('.gc').click( function() {
alert('GC');
$(element).find(".mc").slideToggle('200',function() {
$(element).find("span").toggleClass('faqPlus faqMinus');
});
});
When Angular links the BroadCategory div, the GeneralCategory (ng-repeat)elements have not yet been created yet. So the click handler is never added.
Add the d-expand-collapse attribute to the .gc element. You should then see your click alert fire.
<div d-expand-collapse ng-repeat="gen in group.items">
Your function is being called before the ng-repeat that creates the .gc elements. A quick fix would be to wrap the function in a timeout to let it finish rendering. I'm sure there is a better way using some hook in angular, but this will accomplish what you want.
setTimeout(function () {
$(element).find('.gc').click( function() {
alert('GC');
$(element).find(".mc").slideToggle('200',function() {
$(element).find("span").toggleClass('faqPlus faqMinus');
});
});
});

The second div won't come back after it's clicked twice

I'm not really good at JQUERY, and I just tend to observe things, but here is a code I've been working on. So the goal here is that I want both .people and .people_bg to close when I click anywhere on my screen.
<script>
$(document).ready(function(){
$("#relations").click(function(){
$(".people").slideToggle("fast");
$(".people_bg").slideToggle("fast");
});
});
$('a.close, .people_bg').live('click', function() {
$('.people_bg , .people').fadeOut(function() {
$('.people_bg, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
The problem is: It only works once. The second time around, only '.people' appears, and not '.people_bg'
The remove function that you're using actually deletes elements from the page altogether, so that's your culprit. Replace that with a more appropriate function and you should be just fine.
You can simply just fadeOut without remove. This will hide them without actually removing them from the page: JS FIDDLE
$('a.close, .people_bg').on('click', function () {
$('.people_bg , .people').fadeOut();
});
Additionally, in your first function, you can combine the two class selectors:
$("#relations").click(function () {
$(".people, .people_bg").slideToggle("fast");
});
Also note that you should be using jquery's .on() as of version 1.7 instead of .live().

Jquery help: .click() to each individual element

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');
});

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/

Categories