I have an issue with a show of a parent div at onclick.
As here:
$('#click').click(function() {
$(this).parent().closest('div').slideToggle("fast");
});
http://jsfiddle.net/bk1hLoyb/
I need to show the .show div at the li click, and i need to hide the first when i click another.
Someone know's a method?
Thanks so much
Id's should be unique on the page.
$('.click').click(function() {
$('.show').hide();
$(this).find('.show').slideToggle("fast");
});
http://jsfiddle.net/bk1hLoyb/11/
First Id's must be unique so change it for:
<li class="click">
Bye
<div class="show">Hey</div>
</li>
and the code change it for:
$('.click').click(function() {
$(this).find('div').slideToggle("fast");
});
LIVE DEMO
Some suggestions:
remove all duplicate IDs
if you must use a selector on the li elements, use a class
.show is a child of the li that's clicked, so there's no need to use .parent() or .closest().
Code:
$('.click').click(function() {
$('.show', this).slideToggle("fast");
});
DEMO
BONUS
$(elm).find('.selector') is equivalent to $('.selector', elm)
Also written as jQuery( selector [, context ] )
When context is not specified, it is assumed to be document
Thus $(elm) is equivalent to $(elm, document)
On your "li"s change the id to a class so you can reference multiple divs.
Then on the script looks like this:
$('.click a').click(function() {
var item = $(this);
$(this).parent().siblings().find('.show').slideUp(400,function(){
item.parent().find('.show').slideDown(400);
});
});
See it working on your fiddle (sorry for updating without forking)
Related
I have the following HTML structure and JavaScript file:
.html
<li>
<button class="show-more"></button>
some more elements
<div class="hidden"></div>
</li>
JavaScript
$( ".show-more" ).click(function() {
event.preventDefault();
$( this ).next().slideToggle( "fast", function() {
});
});
I need the click event to toggle the next first instance of .hidden, however the click event is targeting the first element after it and not the next instance of .hidden, any ideas how I can go about it?
nextAll and first:
$(this).nextAll('.hidden').first().slideToggle(...);
This question has more about this: Efficient, concise way to find next matching sibling?
Another possible solution:
$('~.hidden:first', this).slideToggle("fast");
This will match for the first, next sibling of the class .hidden in the context of this.
The ~-selector will reach all following siblings.
Demo
Reference
Next sibling selector
first selector
context of selector
i'm writing a small script to show/hide a div when other div is clicked, but I can't get the second div clickable.
Here's my code so far:
$(document).ready(function(){
$('div#ordontia').click(function(){
$(this).next('div#ordontia2').slideToggle("slow");
});
});
http://jsfiddle.net/65AK2/1/
Every time a "button" is clicked a new div with a description should appear on the bottom of the table. (the blue div on the bottom). If another button is clicked then the previous description should close and another one should open in the same place. (not implement yet)
Thanks in advance for any help!
Why do you want to select your element with next if it has an unique ID?
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
more general if you add more divs:
$(document).ready(function(){
$('.botaomedicina').click(function(){
$('#'+$(this).attr('id')+'2').slideToggle("slow");
});
});
with all others closing:
$(document).ready(function(){
$('.botaomedicina').click(function(){
$('.botaomedicinadescription').slideUp("slow");
$('#'+$(this).attr('id')+'2').slideToggle("slow");
});
});
Don't use $.next, it only selects siblings of the current element:
Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.
— jQuery documentation: .next()
Use the normal one:
$('div#ordontia2').slideToggle("slow");
Fixed it.
http://jsfiddle.net/65AK2/2/
firstly, it lookx like your toggled div was mal-formed. I didnt see a for it.
Secondly, if you know what the ID of the other div is, you dont need to say:
$(this).next("#item");
, it would make no sense.
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
remove this ;)
try this
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
updated fiddle http://jsfiddle.net/65AK2/4/
You can do it directly by an ID selector
http://jsfiddle.net/65AK2/3/
$(document).ready(function(){
$('#ordontia').click(function(){
$('#ordontia2').slideToggle("slow");
});
});
I'm trying to implement the jQuery toggle item in my Rails 3.2.1 app.
I would like the toggle to work for each individual <li> item on the <ul>, so I can target which element to hide/show individually. But for some reason, only the top element has the toggle effect; the rest are not responding.
Here's the jsFiddle.
Can anyone explain why this is happening?
It’s because your divs all have the same id, which is invalid HTML. Since the DOM is only expecting there to be one element with any given ID, then when you write $("#trigger"), it only selects the first one it finds. Change the ID to a class.
<div class="trigger"> ...
And change your ID selector to a class selector.
$('.trigger').click(/* ... */);
jsFiddle
ID attributes must be unique on the page. Change all the id="trigger" to class="trigger" then try:
$(".trigger").click(function (){
$(this).find('.menu-item').toggle();
});
JSFIDDLE
$(".trigger").click('.menu-item', function () {
$(".menu-item", this).toggle();
});
Multiple elements with the same id is invalid HTML, and jQuery will only target the first that it finds with that id.
I updated your fiddle to use a class instead of ids
<div id="trigger" class="trigger">
Then:
$(".trigger").click(function (){
$(".menu-item", this).toggle();
});
to target the class and not the id.
Why do the elements have the same ids? An ID should be unique. If you want to select all the <li>s, use a CSS selector like $(".toggle-li").
I want to hide everything under (but leave the ones above) the element that was clicked by the user. Check out this demo: http://jsfiddle.net/dS2vA/
So if you click on the 2nd <li> the three <li>s under it should be hidden. If you click the 4th <li>, only the 5th element should be hidden.
I tried doing it with :not('clicked') but that targets the elements above the clicked element, as well.
Any ideas?
Just use the following:
$(this).nextAll().hide();
DEMO: http://jsfiddle.net/dS2vA/1/
Try something like this:
$('ul li').click(function() {
$('ul li').each(function() {
$(this).removeClass();
})
$(this).nextAll("li").slice(0,3).addClass('clicked');
})
in addition to VisioN's answer, to be more specific you can add a selector filter ("li") to nextAll() like this:
$(this).nextAll("li").hide();
I have this
<ul>
<li id="any_list">Content to be destroyed</li>
</ul>
and this link:
remove the list "#any_list"
How can I write the deleteList() function in order to the list #any_list and its content?
You can get an element's parent using the parentNode property and you can remove a child element using the removeChild method. Therefore:
function deleteList(element) {
element.parentNode.removeChild(element);
}
It's better not to pollute the markup. Give the link an id first.
remove the list "#any_list"
Then simply
$('#delete_any_list').click(function(e){
$('#any_list').remove();
e.preventDefault();
});
http://jsfiddle.net/rMPdn/1/
Try this, example above: -
$("#any_list").each(function() {
$(this).remove();
});
First, add an id to your anchor and remove any inline Javascript:
remove the list "#any_list"
[it's considered poor practice these days to ever actually put any JS code directly into the markup].
Then, in your jQuery document.ready function add this:
$('#delete_any_list').click(function(ev) {
$('#any_list').remove();
});
See http://jsfiddle.net/alnitak/MbZpV/
$(function(){
$("#delete_any_list").click(function(e){
e.preventDefault();
$("#any_list").remove();
});
});
Delete any list