jQuery show next parent div

Question

I have the following HTML markup:

<div id="step1" class="step">
                    <h1>Enter code</h1>
                    <p><input type="text" value="<%= @groupCode %>" name="group_code" class="span3" />
                        <a class="btn btn-primary btn-medium">
                            Next &raquo;
                        </a>
                    </p>
                </div>
                <div id="step2" class="step" style="display: none">
                    <p>Hello World</p>
                </div>

Upon clicking the link (.btn) I am needing to show the next parent div (#step2). I am designing this as a registration process, so there will be multiple parent divs (all named with step{:id})

Any help is much appreciated!

Answer 1

You should be able to use something like:

//This should access the parent (step1), then the next element (step2)
$(this).parent().next()

Answer 2

jQuery('.btn').click(function(){
    jQuery(this).closest('.step').next().show();
});