Search code examples
jqueryshow-hideclosestsiblings

jQuery - looking to show / hide toggle (using .previous) - where am I going wrong?


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.

http://jsfiddle.net/ghnne/12/

<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();

    });

Solution

  • 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/