Hide div on click with Javascript (a click that already show other div)

Question

I've built a feedback function to be used on the bottom of pages on our company website. The visitor can vote YES or NO on the question, "Was this information useful to you?" The click show a div (feedbackDiv1/feedbackDiv2) via Javascript.

The function works, but I want the question and the answer buttons to disappear after the visitor has voted, Ie hide the div #pagefeedback.

I've tried all my tools, but I cant get this to work.

Help would be very much appreciated!

This is the JavaScript used:

function showFeedback1() {
   document.getElementById('feedbackDiv1').style.display = "block";

function showFeedback2() {
   document.getElementById('feedbackDiv2').style.display = "block";}

This is the HTML used:

<div class="greycontentbox">

<div id="pagefeedback">
<h4 style="text-align: center;">Was this information useful to you?</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
  <tbody>
    <tr>
      <td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback1()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td>
      <td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback2()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td>
    </tr>
  </tbody>
</table></div>


<div align="center"><div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div>
<div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div></div>
</div>

Kind regards, Pete

Answer 1

If you give your table an ID it's fairly easy to just change it's display css to none. Also you can accomplish the same with 1 function and simply pass an argument to it that you can use in a conditional statement to show your appropriate feedback.

 function showFeedback(feedback) { if (feedback == 'yes') { document.getElementById('feedbackDiv1').style.display = "block"; } else { document.getElementById('feedbackDiv2').style.display = "block"; } document.getElementById('options').style.display = "none"; } 

 <div class="greycontentbox"> <div id="pagefeedback"> <h4 style="text-align: center;"> Was this information useful to you? </h4> <table align="center" width="70%" border="0" cellspacing="2" cellpadding="5"> <tbody id="options"> <tr> <td align="center"> <a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('yes')"> <i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES </a> </td> <td align="center"> <a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('no')"> <i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO </a> </td> </tr> </tbody> </table> </div> <div align="center"> <div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list"> POSITIVE FEEDBACK </div> </div> <div align="center"> <div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list"> NEGATIVE FEEDBACK </div> </div> </div> 

Answer 2

Based on Robert's answer, you could do a simple function which receive the ID of the element that has to be shown.

 function showFeedback(feedback) { document.getElementById(feedback).style.display = "block"; document.getElementById('options').style.display = "none"; } 

 <div class="greycontentbox"> <div id="pagefeedback"> <h4 style="text-align: center;">Was this information useful to you?</h4> <table align="center" width="70%" border="0" cellspacing="2" cellpadding="5"> <tbody id="options"> <tr> <td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('feedbackDiv1')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td> <td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('feedbackDiv2')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td> </tr> </tbody> </table></div> <div align="center"> <div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div> <div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div> </div> </div>