Develop Reference

is there a way to toggle a class in a list without affecting other toggles

i am working on a todo list. That show the title with and arrow. This down arrow(when clicked) is supposed to open only it's own paragraph text but it is affecting other titles and their paragraph.
I have tried to use for each in jquery but it is still doing the same thing
$(document).ready(function(){
$(".arrow").click(function(e) {
$(".para").slideToggle("slow");
})
});
i expect each list title arrow when clicked should only show it's paragraph text and not others at the same time.

you can scope the element being modified to the item that was clicked. To do that, first find the item or container that was clicked and then locate the target within that item. For example, if each item were within an element of the item class, you could locate the container and then search within it.
$(".arrow").click(function(e) {
$(this).closest('.item').find(".para").slideToggle("slow");
});

Selected item list in html optimization

I have a list of buttons on my page. I'm trying to make a feature so that when you click a button it becomes selected (I will change its color), and the last clicked button will come back to normal.
The only idea that I could come up for this (based on my newbish skills) is to make a javascript function, which will iterate through all the buttons from the page, and change the color for each of them to the default color, then change color for the clicked button.
This way doesn't seem optimum, as I iterate through the entire list of buttons when I only need to change two. How can I do it in a better way?
I'm not looking for code, just an idea.

Use jQuery.
$('.btn').on("click", function() {
$('.active').removeClass("active");
$(this).addClass("active");
});
Give all the buttons you want this functionality the "btn" css class and then make another css class called active.

you can add a class to changed button
$('#someid').addClass('someclass');
and then check if the button has class
$('#someid').hasClass(className);
UPD
this should work as well
$('.classForAllButtons').css(/*css here*/);
$('clicked element').css(/*css here*/);
this will add style to all buttons and then immediately add css to the clicked button

how to add css animation on div click

I am trying to do a show/hide animation. 1st div will show and 2nd div hide for first time then when i will "details" button which is in 1st div then show 2nd and same when i click "close" button which is in 2nd div then show 1st div and hide 2nd div. i did that no problem but i want to add some css effect when it will show and hide exmple like http://tympanus.net/Tutorials/OriginalHoverEffects/index7.html there have many cool effect all are base on rollover effect i want to this on my click.. can you guess help me how to do..
Basic example here: http://jsfiddle.net/Q5e76
$("#details").click(function () {
$(".one").hide();
$(".two").show();
});
$("#close").click(function () {
$(".two").hide();
$(".one").show();
});

Instead of using .show(); and .hide(); you could use .fadeIn(n) and .fadeOut();
where n is the number of miliseconds it will take.
e.g.
$('.one').fadeOut(500); // half a second.
PS: if these are unique, you should give them ID's to prevent an interaction being executed on multiple elements.
Also it will help yourself if you give your elements proper names.
e.g. id="detail-box" for instance.

Hide all elements that don't have class matching selected element

I've got a cool interface to build.
There's a horizontal scrolling div containing "tiles" of images, and a radio button under each. A user will scroll and decide on an image, then click it. The radio button checks, and jQuery shows another horiz scrolling div below, "now select subcategory"... The user can then further refine the selection by choosing another "tile". That's the process complete.
The problem is I'm not sure how to hide all the elements in the 2nd tier of selection if they don't have a class that matches that of the first selection. Sounds confusing maybe. Here's some simplified HTML, I've posted it on jsfiddle to save space here. http://jsfiddle.net/RTGC3/
So in summary, you'll see from the HTML what needs to happen. A user will see categories, when they click a category, subcategories without the same id as the clicked parent category will be hidden. All others will remain visible ready for the containing div to "show".
I hope I've explained the problem well enough. Thanks for any help offered.
Mike.

Try with this Code:
$(document).ready(function() {
$('input[type=radio][name="type"]').live('change', function() {
var className = $(this).parent().attr("class");
var clsID = className.split('_')[2];
var subID = "in_cat_" + clsID;
$("div[class*=in_cat]").hide();
$("div." + subID).toggle("slow");
});
});
This is the JSFiddle Link:
http://jsfiddle.net/RTGC3/3/

Easiest if you name both container divs with id 1 for example to the same thing, so you would have TWO class="cat_id_1".
Then something liek this:
$('#cat-container div input').on('change', function() {
var id = $(this).parent().attr('class');
$('#des-container div.'+id).fadeToggle();
});
and in CSS you have display:none; on all divs in #des-container (for starters). This will listen for the radio button when it changes, first change it will call .fadeToggle() on div with matching class in your second row and show it, and second change will hide it again.
Was this what you wanted?
Actually I assuem you want all items in the second row to be displayed, but when checking a radio box you want to hide everything besides the one matching the id of the radiobutton? Then you could do like this:
$('#des-container div'+id).addClass('show');
$('#des-container div').not('div.show').fadeToggle();
So basically you add a class to the objects you decide to show, and hide everything that doesn't have that class. Ofcourse for this to work the other way (if you uncheck a radio-box) you would need to add a if-statement seeing the radio button that was changed was changed to checked or unchecked, if unchecked you just remove the class "show" from the element.

How to determine which div is currently displayed behind a button when button is pressed

I'm using Javascript/Jquery to have a button toggle which div is displayed in the user's window. I have my initial background div #container which gets toggled with a different div if the user clicks on a certain location. A back button is toggled on once the new div is displayed. I want the back button to switch the div back to the initial #container if it is pressed. The back button's display should be toggled off again if this happens.
Since I have different divs that the back button shows up in, I need to determine which background div the user is viewing in order to toggle that specific div off and the #container back on. The container will not display again if I do not toggle the current div off.
Here's my code for an example of one instance:
JS:
$(document).ready(function()
{
$("#backButton").click(function(e)
{
if(THE CURRENT DIV IS REGION 1)
{
$("#container").toggle(); //toggle the container on
$("#region1").toggle(); //toggle region 1 off
$("#backButton").toggle(); //toggle the back button off
}
});
});
Obviously, I do not know what code to use to determine which div the user is looking at. I tried if(document.getElementById('region1');) but it didn't work; I didn't think it would, but that's the direction I'm going as to how to determine the current div.
Any help would be greatly appreciated!

if($('#region1').is(":visible")){ etc... }

If you are talking about a back button located in the DOM inside the div region1, you could use:
if($(this).parents("#region1").length > 0)
Which says "if the number of parents of this button containing ID region 1 are non-zero". For more information see parents. In general the traversing functions in jQuery will be helpful to you.

This might be what you're looking for:
http://api.jquery.com/parent-selector/

If all you're doing is switching two DIVs back and forth, you don't even have to check which DIV is currently displayed, because the .toggle() function should do that for you out-of-the-box.
Consider you have two DIVs, make sure one is hidden and one is shown, like so:
<div id="region1">foo</div>
<div id="region2" style="display:none;">bar</div>
Now, when you click on the button, you just have to call .toggle() on both of them.
$('#backButton').click(function(){
$('#region1, #region2').toggle();
});
You can even get by with using only one button to do that, and just switch the text inside the button if you'd like.
// inside the click handler
$(this).val( $(this).val() == 'Next' ? 'Back' : 'Next' );
Full code example here: jsFiddle example