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.
Related
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();
}
});
I have been working with this script and its mind boggling as it looks as though it should work correctly, however it is not. So I turn to you all for an extra set of eyes on what I am missing.
Situation: Basically, what I am trying to do is on click detach a div, then when another radio button is selected, append the div back to its position.
I have included a JSFiddle so you can see that I may not be entirely off track : http://jsfiddle.net/heykate/pusk6ezx/
On load, the user is presented with two options, Support or Inflatable with the default size selected on the support size with the other models sizes hidden. Which is fine. I know ultimately I want to change that first line of code from hide() to detach().
Once I go to click on the second style option, it shows the second models widths like it is supposed to, however if I was to switch back to the first style option. The div I originally detached, is still hidden and will not .append() within my code.
Here is what my script looks like:
$(document).ready(function(){
$('#5e8a1520d82ed2834919fda63f4a3f84').hide();
$('input[type="radio"]').change(function(){
if($(this).attr("value")=="489"){
$( "#b6304c97422f08727702021e2c6c7cda" ).append( ".rightCol" );
$("#5e8a1520d82ed2834919fda63f4a3f84").detach();
}
if($(this).attr("value")=="488"){
$("#b6304c97422f08727702021e2c6c7cda").detach();
$("#5e8a1520d82ed2834919fda63f4a3f84").show();
}
});
});
Please let me know what I am missing. Basically the reason I am doing this to begin with is
To make it less confusing on the front end and
because the defaults are set (for both sizes) they get mashed up in the product order info, so if I could clear the other widths checked radio button or detach and prevent it from being seen, I think it would work out just fine.
.detach REMOVES the element from the DOM. Since it's no longer in the DOM, when you try to .show() it later, it's no longer in the dom, and therefore not findable/usable. That's why .detach() returns the node you've removed, in case you want to re-use it:
foo = $('#blahblah').detach(); // 'foo' now contains the detached now
$('#otherplace').attach(foo); // reinsert the foo element we detached.
//OR
$('#otherplace').append(foo);
I have created 04 buttons and defined the active states for each button in the CSS. These active states are called in JS, so that it changes the div style property on clicked and then resets the property when the other button is clicked.
But this is not working for me.
I have created a fiddleDIV TAG for this. Kindly help.
Change your code from being called onLoad to be called No wrap - in <head>.
Because the functions were inside the onLoad function scope and not the global scope, they were not readable and no javascript was being called when clicking the buttons.
I didn't change any code, just the option on the left pane:
jsFiddle
Update
You also had a small flaw in logic causing the classes to become intertwined. Here's what you were doing:
When first object is clicked, set it's class to obj1_active. When second object is clicked set obj1's class to obj2 and set obj2's class to obj2_active.
As you can see, we're crossing obj1 and obj2 classes. To solve this, we'll keep track of the last object clicked (role) and the class that it should be when a new object is clicked (cname).
Here is the Demo: jsFiddle
Optimization
The code you have works, but it's not very optimized. We shouldn't need four different functions that all do essentially the same thing just to different elements.
In this demo, I simply add and remove _active from the className of each element when clicked: jsFiddle
Lets take it a step further and use multiple classes. This is useful to be able to generalize our CSS declarations. Lets use the default classes, and only append the active class onto the active element and remove it when a new element is clicked.
We'll also separate the _ in the classNames so that btn is its own class as well as mission. This allows for us to really clean up our CSS code to improve readability as well as not need to update multiple sections when we just need a simple background color update or something of that nature.
Here is the optimized demo: jsFiddle
Link Color
I'm not sure if you meant to do this, but you'll notice that the links sometimes start white then turn to black when clicked. This is because the :link pseudo selector only selects non-visited links. If you want it to select all links, then just use the <a> tag: Final jsFiddle
Slap me if I am going about this wrong, I am quite the beginner.
Here is my setup, which is very similar visually to Outlook's UI I guess.
Left pane (floating div) contains a list of containers you can click on (like emails). Right hand pane contains a set of non-visible containers that should become visible when their class is changed to a different css class.
I'm trying to set it up where if you click on the element in the left pane, it then performs an onclick javascript action (stored in an external .js file) that toggles the right div's class value between two css classes.
The onclick in the left pane div passes $_row['uniqueID'] to the function. That is the uniquely incremented column name. It is also the ID value of the right pane 's.
Putting this altogether, can someone direct me on how to do this?
left pane...
<div onclick=\"toggleMenu('".$row['uniqueIdentifier'],"'); \">
right pane...
<div id=".$row['uniqueIdentifier']," class=\"mL\">
css...
div.mL {display:none;}
div.mL.active {display:block;}
function toggleMenu(div){
$('#'+div).addClass('active');
}
jQuery has .addClass() and .removeClass() methods.
I think that's what you're after, let me know if not.
By not changing too much code I suggest doing this :
div.mL {display:none;}
div.mLactive {display:block;}
I erased the dot, so u have now 2 different classes.
So on clicking you just change the class of the div with the correct id to mLactive.
In Jquery this canbe done with $(#'theid').addClass('mLactive');
This only adds the new class. You also want to remove the previous class with $(#'theid').removeClass('mL');
Another way : $(#'theid').attr( "class" , "mLactive" ); Which doesn't require to remove the previous class. Your choice. Another advantage of this method is that javascript has a method to do that which doesn't require Jquery.
Jquery has also the easy options $(#'theid').show(); and $(#'theid').hide() btw.
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.