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();
}
});
Related
Currently I am working on a personal project. You can see the website I am making so far here:
https://codepen.io/JoyFulCoding/pen/EzWyKv
The problem is that I am struggling to add the following feature. The feature is when a user clicks on any of the 6 colored boxes, a further information section should display like below:
I have tried adding a paragraph with an id that has it's display set to none initially. When the user clicks on one of the boxes, the corresponding text for that topic should be shown.
HTML
<p id="fbAdCampaignText> Example Text here </p>
CSS
#fbAdCampaignText {
display:none;
}
.display {
display:inline-block;
}
jQuery
$("#fbAdCampaigns").on('click', function(){
$("#fbAdCampaignText").toggleClass("display");
});
Note: i am using display:none instead of visibility:hide because I don't want the hidden text to take up space since if it did, it may mess up the structure of each of the 6 boxes.
However, this code doesn't seem to do what I want, that is, show corresponding further information depending on which 1 of the 6 boxes is clicked. How can I display further text after an element is clicked in this manner?
You meant this?
https://codepen.io/dravas/pen/NVgvgN?editors=1010
Just change
$("#fbAdCampaignText").toggleClass("display")
to
$("#fbAdCampaignText").toggle()
And if you want to trigger only that div that is inside clicked element then:
$(".fbAdCampaigns").on('click', function(){
$(this).find("#fbAdCampaignText").toggle();
});
Okay, a couple of things here. Firstly, you can't have more than 1 of the same id in your document, so if you have 6 of those paragraphs, lose the id and use a class instead.
Using an id also gives you specificity issues, where the .display class would still have been overridden by the id's styles.
The other thing is that in your jQuery, you're going to toggle the class on all of those elements if you use a class. You need to specifically toggle the class for the element you clicked, so use $(this) instead - to target the element you clicked.
HTML:
<p class="fbAdCampaignText> Example Text here </p>
CSS:
.fbAdCampaignText {
display:none;
}
.fbAdCampaignText.display { // you would have had specificity issues with the id otherwise
display:inline-block;
}
jQuery
$(".fbAdCampaigns").on('click', function(){
$(this).toggleClass("display"); // only target the clicked element
});
There are many posts on this topic already but none that address my issue directly. Here is my current setup:
I have a div with the ID #ptwesv;
and another div containing the content I want to show hide with the ID #ptwest.
The jQuery I'm using is this:
<script>
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").show();
});
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").hide();
});
</script>
This is hiding the #ptwest container correctly on click, but then doesn't show the conatiner when I click the trigger element (#ptwesv) again. I presume this is because once the element has been hidden, clicking on the trigger again is causing the actions to work against each other.
I'm using this W3 exmaple as a reference, the only salient different I notice is that there are different trigger elements for show/hide.
Is it possible to trigger show/hide of an element from the a single div and how can I get this to work?
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").toggle();
});
is the way you want. It toggles the element. So if it is shown it hides and the other way around.
At the moment the element will always hide, because of twice the same click element.
Because Id is unique for whole document. try with toggle()
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").toggle();
});
The toggle() method toggles between hide() and show() for the selected elements.
This method checks the selected elements for visibility. show() is run if an element is hidden. hide() is run if an element is visible - This creates a toggle effect.
$("#ptwesv").click(function(){
$("#ptwest").toggle();
});
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.
My issue here is primarily jQuery...
I'm wanting to have events fire when a certain interaction is carried out however... only for "this" particular item provided all items are identical.
Firstly I'm not sure why the hover state is not firing - the console log shows the interaction is there however, not triggering the div to appear. I need the "show-me" div to appear when only hovered on the span and mouseoff for the div to disappear.
Also when the user clicks "select" for the options to ONLY hide for the current item input they selected - not all options to hide.
I'm having trouble trying to find a way to select elements that are somewhat out of scope as .find() will only find descendants - I want to have my mark up elsewhere and be able to select the element regardless of where it's location is within the markup.
Here is a JSFIDDLE of a working example for you to potentially "fiddle" with ;-)
All suggestions welcome!
Here is my jQuery
//Show item on hover for current item hovered
var item = $('.item'),
itemShow = $('.show-me');
item.hover(function() {
$(this).nextAll('.show-me').show();
console.log("hovered");
}, function() {
$(this).nextAll('.show-me').hide();
});
//Click select to hide options
$('.item').find('input').on('click', function() {
$(this).nextAll('ul').hide();
console.log("select was clicked");
});
Your tree traversal is incorrect using nextAll which is for siblings.... use find() for descendents
$(this).find('.show-me').show();
DEMO
Refer to API Docs
In addition to charlie's answer, you may also use .children(),
$(this).children('.show-me').show();
JSFIDDLE
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');