JQuery - targeting Sibilings, parents, descendants and other family animals
I had a little markup test for a toggle div.
A (working) layout can be found here: http://jsfiddle.net/obmerk99/d78aF/1/
The problem is I need the Hide / Show link to be placed in ANOTHER div like this:
http://jsfiddle.net/obmerk99/d78aF/2/
.. and when I move it it doesn't work for all my efforts.
I tried:
jQuery(this).next().next('.toggle').toggle('slow');
and
jQuery(this).next('.toggle').toggle('slow');
and many others, but this is just a trial and error - then I would like to understand this family stuff (I think I am not a family man, sub-concentrated on my coding ability :-))
Speaking of understanding, in one of my trial and error, I did this:
http://jsfiddle.net/obmerk99/d78aF/5/
which does NOT work, but adding a small one </br>
unexpectedly makes it work.
http://jsfiddle.net/obmerk99/d78aF/4/
Is an empty tag </br>
native?
source to share
Try with this: http://jsfiddle.net/d78aF/6/
jQuery(this).siblings('.toggle').toggle('slow');
As per your comment you can do like this: http://jsfiddle.net/d78aF/7/
jQuery(document).find('.toggle').toggle('slow');
new fiddle: http://jsfiddle.net/d78aF/8/
source to share
Is an empty tag
</br>
native?
What can't you try for yourself?
<div id='firstEl'></div>
<br/>
<div></div>
<div id='siblings'></div>
Then in your js code:
$(function(){
$('#siblings').text($.makeArray($('#firstEl').siblings()).join(','));
});
Results:
[object HTMLBRElement],[object HTMLDivElement],[object HTMLDivElement]
You can see the item is <br/>
seen as siblings
source to share
You might consider a more targeted approach, where in your HTML markup you specify which div to hide. This is common practice with many packages like jQuery Mobile.
http://jsfiddle.net/turiyag/R5sDr/
<p class="hider" for="banks">Hide the banks!</p>
$(".hider").click(function(e) {
var id = $(this).attr("for");
$("#" + id).hide("slow");
log("Hiding #" + id);
});
source to share