Develop Reference

Toggle multiple divs with one button

I´m trying to "toggle" multiple divs with just 2 buttons (one for SHOW and the other for HIDE) in relation to the last div showed by the function, with SHOW and HIDE
So, if I click one time (on SHOW), it must display div with class num1. If I click again, div with class num2 until num5. But, if I click on HIDE, it must hide the last div showed. Is this possible?

You could try to do it like this:
Use an index to store the last class shown.
Everytime you click on the show button increment this index and then $(".num"+index).show() this class.
If you click the hide, do $(".num"+index).hide() and then decrement the index

Show/Hide button for each row in table

I have two buttons in each row of a table. You see button 1 at first. When button 1 is clicked, it disappears and button 2 pops up. This is simple, but I don't understand how to create this behavior for each row individually. Right now it only works for the first row.
I have created a codepen to better illustrate this:
http://codepen.io/cavanflynn/pen/qdVorB
I only understand how to do this using their id's so it only works for the first row.
var first = document.getElementById( 'first' ),
second = document.getElementById( 'second' );
How would you get this behavior to work for each row on its own? Thanks!

Because id must be unique valuesdocument.getElementById() will get the first one;I think you can change the id to class and add an param(witch row) to toggle function. Or in toggle function using js to get the Sbiling node

Like #casimiryang said, problem are the ids. You can only have 1 element with the same ID on the page.
So to solve the problem you can use classes instead and add click event handlers with jQuery.
$(".first").on("click", function(){
$(this).hide();
$(this).next().show();
});
$(".second").on("click", function(){
$(this).hide();
$(this).prev().show();
});
Here is the codepen: solution

As you said you have jQuery, things get really simple. Just replace your IDs with classes and, for each button clicked, get the second within the scope of its parent (i.e. the row). Here's the updated codepen.
$('.first').click(function() {
$(this).hide();
// Using .css() instead of .show() because .show() would render the button with its default display (inline) instead of block.
$(this).parent().find('.second').css('display', 'block');
});

slideToggle only clicked element

I have a menu and when I click a link that has a submenu, I want to toggle it. And I did that, however I have more submenus with the same class and when I click one all of them toggles.
I managed to toggle only the clicked element but in this case I need to toggle the children.
Here is the js code I have:
$('li.has-submenu a.link').click(function() {
$('.submenu').slideToggle(500);
});
And here is a quick fiddle of the situation:
http://jsfiddle.net/TV5Kk/
Thanks!

jsFiddle DEMO
$(this).next('.submenu').slideToggle(500);
Since you have multiple elements with class submenu use $(this) to get the relative element. In your mark up, the next element to the link happens to be one you wanted to toggle.
UPDATE:
Since OP wants to automatically slide up all others.
DEMO here
$('li.has-submenu a.link').click(function() {
$('.submenu').slideUp(500);
$(this).next('.submenu').slideToggle(500);
});

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