Question

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

    });
Was it helpful?

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/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top