I am looking to do a simple show / hide toggle.
When you click the what is the "add" div, it should show the previous sibling. However, despite this seeming so simple, it won't work. I can't figure it out. Any help appreciated. Thanks!
edit* removed part of my question that I resolved (I got the .hide() portion working), but still can't get the piece I mention above to work.
<div class='sideRowStackedInputSideNarrow'>
<div class='sideRowCreateAdditionalInput'></div>
<div class='sideRowCreateAdditionalInputNext'>
<div class='sideRowCreateAdditionalInputNextClose'></div>
</div>
<div class='sideRowCreateAdditionalInputNext'>
<div class='sideRowCreateAdditionalInputNextClose'></div>
</div>
<div class='sideRowCreateAdd'></div>
</div>
$('.sideRowCreateAdd').click(function(){
$(this).previous('.sideRowCreateAdditionalInputNext').show();
});
$('.sideRowCreateAdditionalInputNextClose').click(function(){
$(this).closest('.sideRowCreateAdditionalInputNext').hide();
});
It should be .prev()
and not .previous()
Docs: http://api.jquery.com/prev/
$('.sideRowCreateAdd').click(function(){
$(this).prev('.sideRowCreateAdditionalInputNext').show();
});
Updated fiddle: http://jsfiddle.net/ghnne/16/