We Keep Coding

jquery children first remove class

I have a web page that has a few elements hidden on load here is the sections html layout
As you can see their is a button that on click i need to remove the hidden class on the next child here is the jquery code.
$(document).on('click', '#find-button', function (e) {
$('#find-data').children().first('.hidden').removeClass('hidden');
});
not sure what is happening but the code does not work

The logic isn't quite right.
first() returns the very first element in the collection so as written you would have the first child.
Use the .hidden selector on children() instead to filter only the ones with that class, and get first() of that reduced set
Change to
$('#find-data').children('.hidden').first().removeClass('hidden');

Hide the element within the div

I'm duplicating the div #Play_Start. I have a event within div On select of Play from Dropdown it hides the Green div with Play text.
It works fine on first div. But doesn't work on duplicated div.
I want to hide the green div on selection of dropdown Play option from particular div.
E.g : from div one dropdown selected play option it should hide the green div of only that div not other.
and same with other divs. It should hide the green div on selection of dropdown option from same div.
My fiddle here : http://jsfiddle.net/kgm50e43/2/
at the moment it only works for first div and not for other duplicated divs.

There are multiple problems on your code,
You are duplicating the id's. Id should be unique. You need to replace it with class names.
You don't need to write inline function calls from elements. you can use jQuery to bind events to the elements.
Since you are creating the elements dynamically, you need to use delegates for binding the elements.
Then you can use like this,
$(document).on("change", ".Inputs-Control", function () {
$(this).closest(".Play_Start").find('.IconTest').hide();
});
Fiddle

Don't use IDs when duplicating elements. You should only have 1 ID (unique). You should use classes.
I think this is what you are looking for. I'm not going to be writing your code for you - but you should be able to figure it out using this.
$('.input-control').on('change', function(){
var val = $(this).val();
if(val === "0"){
$(this).parent().find('.hide-me').hide();
}
});

slideToggle opening all links on page?

I am new to Javascript and am having a few issues with my toggle menu:
1) I set the sub links to display:none; but they are still displaying anyway. I need them to be hidden on page load.
2) When clicking one of the main links, it toggles both main links instead of just the one clicked on. What do I need to add so that only the clicked link opens?
http://jsfiddle.net/musiclvr86/5otvoxho/

Bit of hack
$(document).ready(function(){
$('.sub').slideToggle(0);
$('.main').click(function(){
$(this).nextUntil(".main").slideToggle('fast');
});
});
and remove the line from your css
.dark-link.sub {display:none; }
http://jsfiddle.net/5otvoxho/4/

When you call it like this:
$('.sub').slideToggle('fast');
You're targeting every element that has a .sub class, so all of them will toggle. To fix it, you have to subject the selection to the elements relative to the clicked one using this. Since, by your structure they are siblings, not parent/children, you may use the .nextUntil() method from Jquery:
Updated Fiddle
$(this).nextUntil(".main").slideToggle('fast');
This will select every subsequent siblings, until it finds another .main

Check checkbox = Toggle class in div (with many same divs)

I have a list of divs (#div1, #div2, #div3 etc). Each one of those divs contain different pictures and texture. The divs share the same layout class and they all contain a checkbox (all checkboxes also have one class).
I want the individual div to toggle class when the checkbox inside it are checked.
How to manage this without all divs toggle class when click a checkbox in one div?
Thanks.

http://jsbin.com/exasow/1/edit
$(':checkbox').click(function(){
$(this).closest('div[id^=div]').toggleClass( 'superclass' );
});
you can use both click or change function.
http://api.jquery.com/closest/ will allow you to have your checkbox inside other elements, it will always search up the DOM tree for the desired parent:
div[id^=div] means DIV element which ID starts with the word "div" and will work for all your div1, div2, div*** selectors.

Try this. DEMO.
Use the .click() for the checkbox and then get its parent div by using .parent() then call .toggleClass('classforparentdiv').
UPDATE
Here.
Hope it helps.

Give a Id to the checkboxes and on basis of that toggle the parent div class
or, listen to the event and toggle the class of the parent div
Something like this,
$(event.currentTarget).parent().toggle('className');

JQuery expands all divs on page

One div works fine, however when using multiple divs they all get expanded simultaneously.
Here 1x
http://jsfiddle.net/uPzXh/1/
Here 2x
http://jsfiddle.net/uPzXh/

How about:
jQuery(document).ready(function() {
jQuery(".lol").hide();
jQuery(".lollink").click(function() {
jQuery(this).prev().slideToggle(500);
jQuery(this,".new").hide();
});
});
BTW div in a is not allowed according to the spec.

In the second example you have a div with the same class name twice. So this line of code:
jQuery(".lol").slideToggle(500);
is doing what you tell it to do .. open all elements with a class name of lol.
Changing the class of the second div to lol2 would fix this.

I think you need to use $(this) inside the click function rather than $('.lol')
demo

I think what you are looking for is to expand one div when one link is clicked (not expand both, one after the other). If that's right, you can do something like this:
jQuery(".lollink").click(function() {
jQuery(this).hide().parent().find(".lol").slideToggle(500);
});
This hides the clicked element, gets the parent element, finds the descendant of that element with class .lol and toggles the slide on that.
See an updated fiddle here.