We Keep Coding

Remove Class when current toggle is clicked

The title is a bit of a tongue twister. A brief description of the fiddle, is that it's a toggle style accordion where the toggle state changes color when one of the divs is toggled. I've got it working to where if another div is toggled it will close that previous div and open the new div while changing the toggle state.
The issue I am running into is if a user wants to close the current toggle without clicking a different div it will close the current toggle but not change the toggle state back to it's original state. I am currently using this and have tried multiple things including if the container 'is: visible' or hasClass then to remove the toggle class, but nothing seems to work. I've also tried a different slideToggle function, but of course that applied it to the toggled element I've found.
Fiddle: http://jsfiddle.net/NFTFw/1256/
What I am trying to do?
I want the current toggle class to change back to its original state if the user clicks the current toggled div or clicks another div. So essentially I want the user to have either option.
CODE:
$(document).ready(function () {
$('.column').each(function (index) {
$(this).delay(750 * index).fadeIn(1500);
});
$('.column').hide();
$('.body').hide();
$('.column').each(function () {
var $toggle = $(this);
$('.toggle', $toggle).click(function () {
$(".toggle").removeClass("toggle-d");
$(this).addClass('toggle-d');
$body = $('.body', $toggle);
$body.slideToggle();
$('.body').not($body).hide();
});
});
});

Check to see if the thing that you're clicking already has the class. If so, remove it, if not, add it. I suspect the problem you were having with hasClass() is that you were attempting to check the wrong this.
Oooh I did a bad thing and didn't remove the class when a new div was clicked. I've fixed that and updated the jsfiddle
jsfiddle
js:
$(document).ready(function () {
$('.column').each(function (index) {
$(this).delay(750 * index).fadeIn(1500);
});
$('.column').hide();
var width = $(window).width();
if (width <= 600) {
$('.body').hide();
$('.column').each(function () {
var $toggle = $(this);
$('.toggle', $toggle).click(function () {
if($(this).hasClass('toggle-d')){
$(this).removeClass("toggle-d");
}
else{
$('.toggle').removeClass('toggle-d');
$(this).addClass('toggle-d');
}
$body = $('.body', $toggle);
$body.slideToggle();
$('.body').not($body).hide();
});
});
}
});

What i would suggest is to pass the element itself in the function
in the index.html Do this
<a class = 'classname' onclick = toggle(this)>
Your Content Here
</a>
After that in the script.js
what i am saying is in javascript, i believe you can easily convert it to jquery
function toggle(value){
if(value.className == 'the predefined value'){
value.className = value.className + ' Your new class addition'
// remember there should be a space if you are adding an additional class to the present class, else directly change the classname
}
else{
value.className = 'the predefined value'
}}
this will toggle your classname whenever the element is clicked

Use JQuery to target div container for hide/show div without using ID's

I have a script below and wanted to target the show/hide div as the check boxes are clicked without using ID's and restricting the hide/show feature within each container. Any suggestions?
Here is the fiddle. http://jsfiddle.net/45NRN/2/
And here is the jquery code.
$('.c-input').live('change', 'checkbox', function() {
var target = $(this).prev('.showHideDiv');
if ($(this).find('input:checked').length == 0) {
target.hide();
} else {
target.show();
}
});

This should do the trick
$('.c-input').live('change', ':checkbox', function() {
var target = $(this).closest('.c-input').prev().find('.showHideDiv');
if ($(this).find('input:checked').length == 0) {
target.hide();
} else {
target.show();
}
});
DEMO
Some comments:
Replaced 'checkbox' by ':checkbox'. Your selector finds tags with name checkbox (<checbox\>,that's not what you're looking for
this in your context is the checkbox and not the .c-input element. I changed the related selector to reflect this.

Or you could do this Working demo :- ) http://jsfiddle.net/P8UFL/
Issue was you are using .prev for the element which is inside another div --> wrap
Hence, to traverse through it correctly you probably need to do the prev on wrap and then find showHideDiv
Also HTML is bit invalid > chuck in /> with your checkboxes tag.
.live is depricated from 1.7 > Jquery version; alternative is .on just a note.
Hope this helps :)
Code
var target = $(this).prev('.wrap').find(".showHideDiv");

How to toggle dynamically created div 's on the basis of class and name attributes, modified?

Following is my reference Code:
$('#main_div').on('click','.gclass', function(){
$(this).css('color','#0088cc');
if($(this).next().hasClass('gclass2') || $(this).next().next().hasClass('gclass3')){
console.log('1st child or 2nd child');
$(this).parent().find('.gclass2,.gclass3').slideToggle();
}
return false;
});
I have created two divs dynamically who are having same class '.gclass'.
When I click on '.gclass' then divs with '.gclass2 and .gclass3' are toggle.
When I click on one div of class .gclass then other div having .gclass is also getting toggled, which I dont want to.
Any hint please.
For CSS I tried :
$(".gclass").not(this).css("color", "#6e6e6e");
But for slideToggle() what can be done?

For slideToggle() you can write custom filter that will filter out your element:
var that = this;
$(this).parent().find('.gclass2,.gclass3').filter(function() {
return $(this).prev()[0] === that || $(this).prev().prev()[0] === that
}).slideToggle();
Working example see here: http://jsbin.com/IjaboNE/1/edit

How to toggle checkbox selection rather than only selecting?

I currently am using this JavaScript code snippet to select 3 checkboxes at a time
$(document).ready(function() {
var $cbs = $('input:checkbox[name="select[]"]'),
$links = $('a[name="check"]');
$links.click(function() {
var start = $links.index(this) * 3,
end = start + 3;
$cbs.slice(start,end).prop("checked",true);
});
});
Currently this code only selects the checkboxes, however I was wondering if anyone knew how to modify it so that it toggles the checkbox selection on and off?
Here's an example of my current code: "jsfiddle" - click the 1-3, 4-6 links etc to check the checkboxes.

Make the second argument to the prop("checked", ...) call depend on the "checked" status of the first (or other) checkbox in the slice:
// ...
$cbs.slice(start,end).prop("checked", !$cbs.slice(start).prop("checked"));
Here's an updated jsFiddle.
[Edit] Or to update each checkbox in the slice individually:
// ...
$cbs.slice(start,end).each(function() {
var $this = $(this);
$this.prop("checked", !$this.prop("checked"));
});
http://jsfiddle.net/ShZNF/3/

$cbs.slice(start,end).each(function() {
if ($(this).is(":checked")) {
$(this).removeProp("checked");
} else {
$(this).prop("checked",true);
}
});
http://jsfiddle.net/ShZNF/1/
Edit: Maeric's solution is better. I wasn't aware removeProp had this gotcha:
Note: Do not use this method to remove native properties such as
checked, disabled, or selected. This will remove the property
completely and, once removed, cannot be added again to element. Use
.prop() to set these properties to false instead.

Javascript change style on mouse click

i have a little jquery script :
$('.product_types > li').click(function() {
$(this)
.css('backgroundColor','#EE178C')
.siblings()
.css('backgroundColor','#ffffff');
// $('.product_types > li').removeClass(backgroundColor);
});
that colors me a div onclick. The problem is that i want only the last element clicked to be colored. And i dont know can i remove the style (the css style) after every click ?
thank you

I would use a css class like .lastClicked and using jquery to remove all instances of .lastClicked when a new element is clicked.
.lastClicked{ background-color:#EE178C; }
.lastClicked (siblingName) { background-color: #ffffff; }
your jquery code would look something like:
$('.product_types > li').click(function() {
$(".lastClicked").removeClass("lastClicked");
$(this).addClass("lastClicked");});

You can store lastly clicked element in global variable, and on click reset its color :
var lastElm = null
$('.product_types > li').click(function() {
if( lastElm ) $(lastElm).css('backgroundColor','#[Your original color]')
lastElm = this;
$(this)
.css('backgroundColor','#EE178C')
.siblings()
.css('backgroundColor','#ffffff');
// $('.product_types > li').removeClass(backgroundColor);
});

You need a variable that store the actual colored div and remove style on it. Something like this (not tested) should do the trick :
(function(){
var coloredDiv = null;
$('.product_types > li').click(function() {
var item = $(this);
if(coloredDiv != null) coloredDiv.removeClass('someCSSClassThatColorMyDiv');
item.addClass('someCSSClassThatColorMyDiv');
coloredDiv = item;
});
})();
NB: I also suggest to use CSS class instead of manualy set the CSS property in the Javascript. This leads to better separating of the code logic and displaying.
I also put the whole stuff in a closure so the variable cannot be overriden by some other script by mistake.