We Keep Coding

jQuery Panel Will Not Toggle Active Class/Collapse One at a Time

I have two divs - one panel div that controls what shows on the other div. The problem is I have to apply a 'selected' class when a panel is active and also when the sub items under the panel is active as well. Right now, it does not "toggle" the selected class when active. This is what I have so far...
jQuery
$('.options-display .options-list').hide();
$('#option-1').show(); // change to whatever is shown first on page
$('.collapse p').click(function(){
$(this).toggleClass('.selected');
var target = '#' + $(this).data('target');
$('.options-list').not(target).hide();
$(target).show();
});
jsfiddle
https://jsfiddle.net/peyton_fields98/48d8zut7/

It is working as written, perhaps not as intended. There are two aspects which may not be obvious that led to your confusion.
First, this is a common typo that I have made as well, when using a class name in the toggle (or addClass or removeClass) make sure you do not include the . for the selector
//$(this).toggleClass('.selected');
$(this).toggleClass('selected');//should be this
// ^no `.`
To note: using this approach still leaves the original "selected" class intact. Perhaps you should preface this line of code with
$('.collapse .selected').removeClass('selected');
Second, the this binding in the click callback is going to be the element clicked, and in your example when selecting a sub item, it is the <p> element. Perhaps the selected class should be on the parent div in those cases if you are wanting to style the entire section. It was hard to tell as you left out the styling for the selected class.

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();
}
});

Make entire DIV block clickable

I have a script on my site and using jQuery it makes the variation-value div element clickable.
Unfortunately the areas with the p & div tags aren't clickable. Is there an easy fix for this?
jsfiddle example ::: http://jsfiddle.net/xb4qkdLu/ :::
<div class="variation-value">
<p class="left" style="background:green">left aligned text</p>
<div class="right" style="background:red">right aligned text</div>
<p></p>
</div>

What I'm seeing in the jsfiddle you posted afterward, is that you are binding the click to the td element within the variation class ($('.variation').on('click', 'td', function(event){...).
Based on what you wrote, and the comment I've left under your original post, hooking a click trigger listener to the .variation-value' class would solve this for you (as you've currently got no events tied to it).
If you would like to supplement you original script, you would either have to go around with some CSS "hack", by adding to the css of p and span within the td the following pointer-events:none; (will require some extra IE fine-tuning), or you could also add the other elements within the td to the trigger listener.
Code sample:
The CSS would be like (considering normal-case browser):
.variation-value > p, .variation-value > div { pointer-events:none; }
The Jquery would be:
$('.variation-value').on('click', function(event){ ... }
Do keep in mind that your left element is bound to reset your values list if it is visible (haven't found any trigger set for the right element). If you are enabling a click-through effect for all the elements within your .variation-values, you are losing the reset-effect bound to the left element. Is that surely what you are looking to achieve? If so, just go wihout the above CSS snippet, and you will have it all function as you would like.
Also just to note, in your HTML markup, you are putting elements in the following hierarchy:
div.variation-value
p[left]
div[right]
You aren't closing your p element before adding in the div for the right element that is it becomes a child of the p. I'm assuming you should've closed the p tag to ensure functionality as intended.

http://jsfiddle.net/hasecbinusr/pctgs5ke/
$(document).ready( function(e) {
$('.variation-value').click(function () {
alert('You clicked it!');
});
});

How to use the same JQuery effect for different divs with same class

I'm not really into using javascript and jQuery so please add detailed answers.
I need to add a jQuery effect to different divs with the same class, so that when I click on a div 1 with class item, another div info will appear in a specific container.
Also, if I click on div 2 with the same class item, another div pics will appear in the same container as info while info will disappear.
I was going to use this:
$(document).ready(function(){
$("#box1").click(function(){
$("#box1").fadeOut(250);
});
$("#box1").click(function(){
$("#box2").fadeIn(500);
});
});
But this is not valid for using about 10 divs and another 10 displaying and hiding divs.
I would use many lines of code and I am not sure that it would work.

You could use the selector $(".item") to get all the divs you're interested in.
Class selector sounds like what you need: http://api.jquery.com/class-selector/
You can differentiate the ids once you're inside the click call and take a different action. but the class selector will let you use the click event handler on all of the divs you're interested in.
sample code below
$(document).ready(function(){
$(".item").click(function(e){
// output the id of the clicked item
console.log($(e.target).attr("id"));
if($(e.target).attr("id")=="box1"){
//do something for if the clicked item is box1.
$("#box1").fadeOut(250);
$("#box2").fadeIn(500);
}
});
});

Without your html, it's hard to say exactly. But, here's a starter point.
Your existing jQuery is like so, which is grabbing every div by ID.
$(document).ready(function(){
$("#box1").click(function(){
$("#box1").fadeOut(250);
});
$("#box1").click(function(){
$("#box2").fadeIn(500);
});
});
An improvement would be to use a class rather than an ID, and you could do something like so.
NOTE: The below assumes you assign either a different class, or an additional class of itempic to the div(s) you want to trigger the pics to be displayed:
$(document).ready(function(){
$(".item").click(function(){
$(".info").fadeOut(250);
});
$(".itempic").click(function(){
$(".pics").fadeIn(500);
});
});
If you have multiple divs that are going to have this same functionality (for example, you've got a bunch of products, each with an info box and a pic box), then you'll need to do something with "containing" the selectors to the given items. With some example HTML, I could provide an answer that takes that into account.

Structure you html similar to this
<div id="container">
<div id="info">info contents</div>
<div id="pic">pic contents</div>
</div>
<div class="item" data-related="#info">your contents</div>
<div class="item" data-related="#pic">your contents</div>
..etc.
and use
$(function(){
$('#container').children().hide(); // initial hiding
$('.item').click(function(){
var relatedId = $(this).data('related');
$(relatedId).show().siblings().hide();
});
});
Demo at http://jsfiddle.net/gaby/mTSZv/

When selecting with jQuery you need to use #id_name for IDs and .class_name for classes. When selecting div, tr, td, ... you need no special symbol before the name. So:
$('#id_name').click(); // click on every item of the ID 'id_name'
$('.class_name').hide(); // make all items invisible that have class 'class_name'
$('tr').addClass('class_name'); // adds the class 'class_name' to all tr items
IDs are unique. Classes can appear more than once.
Just read the examples on jQuery API
In order to get started with JS jQuery is very good. Very fast to do, but don't forget jQuery is a library that has to be loaded making these short commands possible. Pure javascript will be faster.
Don't forget, you can combine JS and jQuery, as jQuery is JS. Switching to pure JS will also make you see what your scripts exactly do.

How do I use the jQuery click method to show hidden elements?

This is a pretty basic question, but I've been working at it for a while and can't figure out the solution.
I have a series of <li> items in an HTML document. At the end of each, I have a button that I want to, when clicked, show some hidden text.
<ol>
<li>Click this button to show hidden text <button>Click</button>
<p style="display:none;">Some text</p></li>
</ol>
Since I have a series of these <li>, I figured the easiest way to do this is having each button click show the nearest hidden element through JQuery
Here's the JQuery code I've been trying to use:
$('button').click(function() {
$('p.pages').nextUntil('li').toggle('slow');
});
To be honest, I'm not sure I'm using the right JQuery method to do this, but I've tried looking through the JQuery docs and it seems like this best fits what I'm trying to do.

What you looking for is
$('button').click(function() {
$(this).next('p').toggle('slow');
});
fiddle

There are multiple problems with the code you presented.
You're using the p.pages selector, which looks for a <p> with class="pages". You'll find nothing in your document with this selector.
Another problem is that because you're using the $('button') selector, this will apply to all <button>s on your page, not just buttons in that list.
Next, you're looking for elements after the <p>, when you're actually trying to toggle the <p> itself.
The last problem is that this code will only support one such item. You're not specifying which <p> to select, so when you click any button on your page you'll hide the first <p>, even if the button is further down the list.
Solution
I would assign a class to the button to select it, in case you have different button types.
I'd also use the $(this) (for the button), and .next('p') to find the p right after the specific button you pushed.
Then I'd remove the CSS display using .css('display', 'inherit'). Or use .toggle('slow') like in your original question:
See this fiddle.
HTML:
<ol>
<li>Click this button to show hidden text
<button class="makeVisible">Click</button>
<p style="display:none;">Some text</p>
</li>
</ol>
JS:
$('button.makeVisible').click(function() {
$(this).next('p').css('display','inherit');
// or: $(this).next('p').toggle('slow');
});

$('button').click(function() {
$(this).next().toggle('slow'); });