I am currently working on a "collapse all"-button for Bootstrap 3 collapsible plugin. It seems to work fine, but only if I have got only one single collapsible on my page. When I add another one, my method will still just work in the first link item.
Here ist my JS:
$(function () {
$("#toggle-all").click(function (e) {
e.preventDefault();
var $hidden = $(this).parent().data("hidden");
if ($hidden == "false") {
$(this).parent().find(".collapse.in").each(function () {
$(this).collapse("hide");
});
$(this).parent().data("hidden", "true");
} else {
$(this).parent().find(".collapse").not(".in").each(function () {
$(this).collapse("show");
});
$(this).parent().data("hidden", "false");
}
$(this).find("i").toggleClass("fa-plus fa-minus");
});
});
And here a fiddle to try: http://jsfiddle.net/rMdLZ/
Any ideas why it does not work as expected?
Thanks,
Julian
You are using 2 id's. Id's must be unique elements on each document.
See this SE question for reference: Two HTML elements with same id attribute: How bad is it really?
Change it to Classes:
$(function () {
$(".toggle-all").click(function (e) {
e.preventDefault();
var $hidden = $(this).parent().data("hidden");
if ($hidden == "false") {
$(this).parent().find(".collapse.in").each(function () {
$(this).collapse("hide");
});
$(this).parent().data("hidden", "true");
} else {
$(this).parent().find(".collapse").not(".in").each(function () {
$(this).collapse("show");
});
$(this).parent().data("hidden", "false");
}
$(this).find("i").toggleClass("fa-plus fa-minus");
});
});
http://jsfiddle.net/vP4e9/1/
Don't use ids. Use classes and I think you should do fine.
Why?
Because the ids have to be unique through out the frame.
$('#someId') will always return you the same element, but $('.someClass') will return you all elements with someClass class
I've changed $("#toggle-all").click to $(".toggle-all").click and added the toggle-all class the the collapse all buttons. And it works fine.
Demo
Related
I have several images with the same class and would like to set up a click function that changes the text in some elements based on which image is clicked.
My if statement is not working, I'm not entirely sure why because I've used this method before, or so I thought.
$('.gallery_image').click(function(e) {
var t = $(this);
if(t.id == 'csf') {
console.log('It works!');
}
});
JSFIDDLE
Use t.attr('id') instead of t.id
More about .attr()
An alternate solution is using classes instead of id's. Call the click function on the class they share then use a second class to distinguish them with the hasClass function:
<div id="csf" class="gallery_image csf">csf</div>
<div id="csi" class="gallery_image csi">csi</div>
$('.gallery_image').click(function(e) {
var t = $(this);
if(t.hasClass('csf')) {
alert("It works!");
}
else if(t.hasClass('csi')) {
alert("So does this!");
}
});
I'm starting with jquery, and have an issue here:
http://jsfiddle.net/8guzD/
$('#test.off').click(function(){
$(this).removeClass('off').addClass('on');
});
$('#test.on').click(function(){
$(this).removeClass('on').addClass('off');
alert('ok');
});
the first part of the code goes well, the class is apply, but when I attach an event in this element with its new class it won't work.
Can someone explain me what is the problem exactly?
I tried with javascript,
http://jsfiddle.net/R5NRz/
var element = document.getElementById('test');
element.addEventListener('click', function() {
this.id ='test2';
alert("ok");
}, false);
var element2 = document.getElementById('test2');
element2.addEventListener('click', function() {
alert("ok2");
}, false);
and it didn't really help me, having the same issue
try
$(document).on("click",'#test.on',function(){
$(this).removeClass('off').addClass('on');
alert('ok');
});
$(document).on("click",'#test.off',function(){
$(this).removeClass('off').addClass('on');
alert('ok passs');
});
Demo
In your jQuery example you are binding to DOM elements that exist at that time. That is why you see the first fire but not the second. It is not a match for your '#test.on' selector when the code is run. What you want to do instead is use delegation:
$('#test').on('click',function() {
var ele = $(this);
if (ele.hasClass('on')) {
ele.removeClass('on').addClass('off');
} else {
ele.removeClass('off').addClass('on');
}
});
This assumes that you are doing more than just toggling classes. If you want simply toggle classes then an easier solution is to pick one as the default and use the other as a flag. For example, .on is on but without .on it's off. Then you can just use toggle:
$('#test').on('click', function() {
$(this).toggleClass('on');
});
$("#test.on")
Doesn't bind to anything. Try this:
$('#test').click(function() {
if($(this)).hasClass('off') $(this).removeClass('off').addClass('on');
else $(this).removeClass('on').addClass('off');
});
You might consider using an 'active' class instead and just toggling that, instead of have two separate on/off classes. Then you can write:
$("#test").click(function() {
$(this).toggleClass('active');
});
I've been at this problem for a while now, and I can't seem to figure it out. I have a checkbox that when checked, deletes a div containing a textbox. When that checkbox is unchecked the aforementioned textbox should return to the page. The removal works, but the append doesn't.
This is what I'm currently working with code wise:
$('#ResultsNoData1').click(function () {
var parent = document.getElementById('Results1').parentNode;
var child = document.getElementById('Results1');
if (this.checked) {
parent.removeChild(child);
}
else {
parent.appendChild(child);
}
});
My original design worked by doing the following:
$('#ResultsNoData1').click(function () {
(this.checked) ? $('.results1').hide() : $('.results1').show();
});
However the functionality I need to recreate is actually removing the data from this textbox from being accessed on the site while hiding the textbox itself at the same time. This doesn't provide that functionality.
Current example
Here you go: http://jsfiddle.net/cx96g/5/
Your issue is that you were trying to set parent inside your click, but once child is removed it would fail.
var parent = document.getElementById('Results1').parentNode;
var child = document.getElementById('Results1');
$('#ResultsNoData1').click(function () {
if (this.checked) {
node = parent.removeChild(child);
}
else {
parent.appendChild(child);
}
});
You need to show and hide that TextBox not remove.
$('#ResultsNoData1').click(function () {
if (this.checked) {
$("#Results1").hide();
}
else {
$("#Results1").show();
}
});
Working example
$('#ResultsNoData1').click(function () {
(this.checked) ? $('#Results1').val('').parent().hide() : $('#Results1').parent().show();
(this.checked) ? $('.results1casual').hide() : $('.results1casual').show();
});
JSFiddle
You are doing it right way but missing one small thing need to remove value from the textbox.
$('#ResultsNoData1').click(function () {
(this.checked) ? $('.results1').hide() : $('.results1').show().val("");
});
or
$('#ResultsNoData1').click(function () {
(this.checked) ? $('.results1').hide().val("") : $('.results1').show();
});
And this is the right way(show/hide) the textarea.
I am trying to apply a function to every checkbox on a page that shows/hides <div class="selectlist"> depending on if the checkbox is checked, this function makes all the <div class="selectlist"> on the page toggle
$("input[type=checkbox]").live('change', function() {
if ($(this).is(':checked') == false) {
$('#selectlist').hide();
} else {
$('#selectlist').show();
}
});
I tried the jquery each function like this but that doesnt seem to work
$.each($("input[type=checkbox]").live('change', function() {
if ($(this).is(':checked') == false) {
$('#selectlist').hide();
} else {
$('#selectlist').show();
}
}));
I know its possible to this by using a class instead of input[type=checkbox] but I want to avoid doing that
How can I make jquery change the behavior of the checkbox the user clicks?
If you're trying to bind an event handler to all elements verifying input[type=checkbox], simply do
$(document).on('change', "input[type=checkbox]", function() {
if (!this.checked) {
$('#selectlist').hide();
} else {
$('#selectlist').show();
}
});
No need to use each there : most jQuery functions work if the jQuery set contains more than one element.
Note that I use on there instead of live : after having been deprecated for a long time, live has been removed from recent versions of jQuery.
EDIT : discussion in comments below lead to this code :
$(document).on('change', "input[type=checkbox]", function() {
$(this).next().toggle(this.checked);
});
$(document).on('change', 'input[type=checkbox]', function() {
$('#selectlist').toggle(this.checked);
});
ID's are uniqe, and there is no "all the <div id="selectlist"> on the page toggle", there can be only one? Use a class instead, and show us what the markup looks like !
I have two div elements that are hidden on $(document).ready(function(){} and they are supposed to appear if their specific check box is checked, and disappear if it was checked and then unchecked. I can show the element when the checkbox is selected very easily using show() or slideDown() but when i use the if else statements it returns as false everytime and the forms stay hidden...
$(document).ready(function(){
if($("#upload_yes").is(':checked')) {
$("#upload_form").show();
} else {
$("#upload_form").hide();
}
if($("#new_info_yes").is(':checked')) {
$("#new_info_form").slideDown(500);
} else {
$("#new_info_form").hide();
}
});
You aren't binding this code to the proper event:
$(document).ready(function() {
$("#upload_yes").on('change', function() {
if ($(this).is(':checked')) {
$("#upload_form").show();
$("#new_info_form").slideDown(500);
} else {
$("#upload_form, #new_info_form").hide();
}
});
});
See this fiddle
You must do the job in the change event.
then calling .trigger('change') on the check boxes make the div show/hide on the initial page load.
The code :
$(document).ready(function(){
$('input#upload_yes').change(function(){
if($(this).is(':checked')) {
$("#upload_form").show();
} else {
$("#upload_form").hide();
}
});
$('input#new_info_yes').change(function(){
if($(this).is(':checked')) {
$("#new_info_form").slideDown(500);
} else {
$("#new_info_form").hide();
}
});
//Trigger the change event so the divs are initially shown or hidden.
$('input[type=checkbox]').trigger('change');
});
To evaluate if something has changed you need to do your code inside an event! (in this case: change) because what you are doing is to get the value of is(':checked') just at $(document).ready and it will always return false because at first moment your element wasn't checked.
Well, this is the correct way :-)
(I tried to reduce code)
Live Demo:
http://jsfiddle.net/oscarj24/RSDRg/
Code:
$(document).ready(function() {
$('#upload_yes').on('change', function() {
var done = $(this).is(':checked');
if(done) {
$('#upload_form').show();
$('#new_info_form').slideDown(500);
} else {
var frm = $('#upload_form').add('#new_info_form');
frm.hide();
}
});
});