We Keep Coding

Have only 1 div toggle instead of all

running into issues of trying to have only 1 div toggle instead of them all toggle. I've tried using next() and setting the selector to the children as opposed to the parent element, but then it won't toggle open at all.
FIDDLE:
http://jsfiddle.net/L415g07n/2/
What I am specifically trying to accomplish?
Have the selected div toggle when .toggle is clicked instead of all of them being toggled at once.
var c1 = $("#o");
var c2 = $("#t");
var c3 = $("#th");
$(document).ready(function () {
$(c1).hide(0).delay(500).fadeIn(1500);
$(c2).hide(0).delay(1500).fadeIn(1500);
$(c3).hide(0).delay(2500).fadeIn(1500);
});
var content = $("#main .column .body");
$(content).hide();
var t1 = $(".toggle");
$(t1).click(function () {
$(content).slideToggle('slow');
$(t1).toggleClass("toggle");
$(t1).toggleClass("toggle-d");
});

Try to use this object and traverse to the required nodes,
$(t1).click(function () {
$(this).toggleClass("toggle")
.toggleClass("toggle-d")
.parent().next('.body').slideToggle('slow');
});
DEMO

jQuery's $(this) alows you to apply your effects on the current element. Here's the correct, shorter and simpler version of your code:
$(document).ready(function () {
$(".column, .body").hide(); // you should put this in your CSS ( .column, .body { display: none; } )
$(".column").each(function(index) {
$(this).delay(400*index).fadeIn(300);
});
$(".toggle").click(function () {
$(this).toggleClass("toggle").toggleClass("toggle-d").parent().next(".body").slideToggle();
});
});
Notice, how you can even improve the part when your divs fade in, by reffering to them with a class name instead of id by using $(this) and .each().
I think w3schools explains $(this) quite nicely.

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 do I set the CSS for one instance of a class when the markup has multiple instances

I have a page with a content accordion with 8 items. I also have an h4 tag on the page outside of the accordion. I want to hide which ever content accordion item matches the text inside the h4 tag.
The text inside the h4 tag and the content accordion items might change so I need to use variables (I think).
Here is what I have so far:
var category = $('.leftColumnNav h4').html();
var topic = $('.contentAccordionItemTitle p').html();
if(topic === category){
$(".contentAccordionItemTitle").css("display", "none");
} else {
$(".contentAccordionItemTitle").css("display", "block");
}
What I have sort of works. It successfully hides the .contentAccordionItemTitle. Unfortunately it obviously hides all of them. I just want to hide the one that matches the h4 tag.
If it's needed I can probably create a JSFiddle example.

var category = $('.leftColumnNav h4').text();
$(".contentAccordionItemTitle").each(function() {
if ($(this).text() === category) { $(this).hide() }
})

var topic = $('.contentAccordionItemTitle p').html();
That line means you're getting all the p-tags. If you want to continue down this solution, you could use the jQuery each function -> http://api.jquery.com/each/
$(".contentAccordionItemTitle").css("display", "none");
} else {
$(".contentAccordionItemTitle").css("display", "block");
The $(".contentAccordionItemTitle") also gets all elements with this class.

You should use a loop, like jQuery each:
var category = jQuery('.leftColumnNav h4').html();
jQuery('.contentAccordionItemTitle p').each(function() {
if(jQuery(this).html() === category) {
jQuery(this).parent('.contentAccordionItemTitle').css('display', 'none');
} else {
jQuery(this).parent('.contentAccordionItemTitle').css('display', 'block');
}
This is assuming there is only one element that matches jQuery('.leftColumnNav h4')

Use jquery to change the class of a target element from array

I have a List li of elements that I used .toArray(). I now need to loop through them to find the desired element and change its style Class.
I am not sure what I am doing wrong, but I cannot seem to get the class of the index item, but I can retrieve the innerHTML no problem.
var viewsIndex = $('#viewsList li').toArray()
for(i=0; i < viewsIndex.length; i++) {
if(viewsIndex[i].innerHTML == selectedTab) {
console.log(viewsIndex[i].attr('style')); //This does NOT work
console.log(viewsIndex[i].innerHTML); //This does work
}
else
{
}
}
Once I target the Element, I want to use .removeClass and .addClass to change the style.

This is the DOM object which doesn't have jQuery functions:
viewsIndex[i]
This is the jQuery object which has the attr function:
$(viewsIndex[i]).attr('style')
Anyway, your code could be a lot simpler with this:
$('#viewsList li').filter(function(){
return this.innerHTML == selectedTab;
}).removeClass('foo').addClass('bar');

You are trying to call jQuery function on DOM object convert it to jQuery object first.
Change
viewsIndex[i].attr('style')
To
$(viewsIndex[i]).attr('style')

couldn't you use .each()?
$('#viewLists li').each(function(i){
if($(this).html == selectedTab){
$(this).removeClass('foo').addClass('bar');
}
});

Loop over the elements using jQuery each and then access them as $(this). This way you'll have access to jQuery methods on each item.
$('#viewsList li').each(function(){
var element = $(this);
if(element.html() == selectedTab){
console.log(element.attr('style')
} else {
}
}

jquery - toggle between divs with default option

I am trying to toggle between divs.
It works until I want to uncheck selected element, which should show default element (option-0).
Here is my code:
http://jsfiddle.net/klawisz/fZemQ/6/

check this out quite simple
$('.checkbox').click(function(){
var self = $(this);
$('.options').hide();
if(self.hasClass('active') ) {
self.removeClass('active');
$('.options.option-0').show();
}else{
$('.checkbox').removeClass('active');
self.addClass('active');
$('.options.'+ self.attr('id')).show();
}
});
fiddle updated : http://jsfiddle.net/fZemQ/10/

In these lines:
if( $('.checkbox').hasClass('active') ) {
$('.checkbox').removeClass('active');
}
You're removing the class 'active' so your if statement will always run the else
I've changed you code so it now works:
http://jsfiddle.net/tuwb7/

Change
$('.options.option-0').show();
To
$('div').hasClass("option-0").show();
Your initial selector is looking for elements with a class of options, that contain an element with a class of option-0.