Search code examples
prototypejs

Prototype.js: Showing the next hidden div

How do I show a hidden adjacent div on Prototype.js? Here is my current code:

<button id="checkAnswer" onclick="checkAnswer2()">Check Answer</button>
<p class="feedback">Feedback:</p>

Script:

function checkAnswer2 () {
    $('checkAnswer').next().show();        
}
Solution

  • If you put the ID in the function, you’re going to have to make a new function for each question/answer pair. How about this:

    <button class=“checkAnswer”>Check Answer</button>
<p class=“feedback”>Feedback:</p>

    script

    $$('.feedback').invoke('hide');
$(document).on('click', '.checkAnswer', function(evt, elm){
  elm.next('p').show();
});

    Now you can repeat as many of these as you want on the page, and each button will always manage whatever p follows it.