 <p>Putting @j08291's comment into an answer.</p> <p>You can only have one element with an ID. Change them to classes, and you'll need to do some tree traversing to get the reference to the correct form elements to show and hide <a href="http://jsfiddle.net/pcUBr/" rel="nofollow">http://jsfiddle.net/pcUBr/</a></p> <p>Also, your CSS class names (<code>show,hide</code>) aren't very semantic. Try the following</p> <p><strong>CSS</strong></p> <pre><code>.question_form { display: none; } .question_form.current { display: inline; } </code></pre> <p><strong>JS</strong></p> <pre><code>$(".button").click(function(e){ var form = $(e.target).closest('form'); form.toggleClass("current"); form.next().toggleClass("current"); }); </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;form class="question_form current" &gt; &lt;img src="image1.png" class="current_image" alt=""&gt; &lt;h3 class="question"&gt; Question 1: &lt;/h3&gt; &lt;hr&gt; &lt;input type="radio" name="q1" value="q1-a"&gt;Answer 1 &lt;br&gt; &lt;input type="radio" name="q1" value="q1-b"&gt;Answer 2 &lt;br&gt; &lt;input type="radio" name="q1" value="q1-c"&gt;Answer 3 &lt;br&gt; &lt;br&gt; &lt;input name="button" type="button" class="button" value="Next"&gt; &lt;/form&gt; </code></pre>