Make the JavaScript link hide onClick

Question

I have a form page and certain items only appear on the list if a link is clicked on. I want the link to hide when it is clicked on and the action it calls un-hides.

This is my test page:

function toggle_it(itemID) {
  // Toggle visibility between none and '' 
  if ((document.getElementById(itemID).style.display == 'none')) {
    document.getElementById(itemID).style.display = ''
    event.preventDefault()
  } else {
    document.getElementById(itemID).style.display = 'none';
    event.preventDefault()
  }
}

<table width="500" border="1" cellpadding="3">
  <cfform action="" method="POST">
    <tr>
      <td align="center"><strong>ID</strong>
      </td>
      <td align="center"><strong>DESCRIPTION</strong>
      </td>
      <td align="center">
        <strong>SAY IT</strong>
      </td>
    </tr>
    <tr>
      <td align="center">a</td>
      <td>
        The&nbsp;field&nbsp;with&nbsp;no&nbsp;name
      </td>
      <td>
        <cfinput type="Text" name="aaa" value="">
      </td>
    </tr>
    <tr id="tr1" style="display:none">
      <td align="center">a1</td>
      <td>Add-on1</td>
      <td>
        <cfinput type="Text" name="a1" value="Add-on1">
      </td>
    </tr>
    <tr id="tr2" style="display:none">
      <td align="center">a2</td>
      <td>Add-on2</td>
      <td>
        <cfinput type="Text" name="a2" value="Add-on2">
      </td>
    </tr>

    <tr id="tr3" style="display:none">
      <td align="center">a3</td>
      <td>Add-on - Daily1</td>
      <td>
        <cfinput type="Text" name="a1d" value="Add-on - Daily1">
      </td>
    </tr>
    <tr id="tr4" style="display:none">
      <td align="center">a4</td>
      <td>Add-on - Daily2</td>
      <td>
        <cfinput type="Text" name="a2d" value="Add-on - Daily2">
      </td>
    </tr>
    <tr>
      <td colspan=3>
        <input type="submit" name="Submit" value="Submit">
      </td>
    </tr>
  </cfform>
</table>

&nbsp;
<!--- ----------------------------------------------------------------- --->

<table border="0">
  <tr>
    <td align="right">Add-on1:&nbsp;</td>
    <td><a href="#" id="toggle" onClick="toggle_it('tr1')">Add-on1</a>
    </td>
  </tr>
  <tr>
    <td align="right">Add-on2:&nbsp;</td>
    <td><a href="#" id="toggle" onClick="toggle_it('tr2')">Add-on2</a>
    </td>
  </tr>
  <tr>
    <td align="right">Add-on3 - Daily1:&nbsp;</td>
    <td><a href="#" id="toggle" onClick="toggle_it('tr3')">Add-on - Daily1</a>
    </td>
  </tr>
  <tr>
    <td align="right">Add-on4 - Daily2:&nbsp;</td>
    <td><a href="#" id="toggle" onClick="toggle_it('tr4')">Add-on - Daily2</a>
    </td>
  </tr>
</table>

The code is in CF but this is a JavaScript function.

BTW. Thank you whoever wrote the original script I found on Stackoverflow a while back.

Yep. That is what i started with and it works as advertised. What i want is the original link to hide. There can be many options on the list and i don't want the visitor to click on the same one twice. — Andy, Jun 05 '15 at 08:17

score 2 · Accepted Answer · answered Jun 05 '15 at 04:24

Plunker

Description: Gave html elements for toggle unique ids. Also needed to update the javascript to get the parent element of the parent element of the link clicked. This only works when there are two elements to reach the tr.

Importantly, this code has an extra unhide that isn't needed...since we are hiding it and there is nothing to click.

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
      <table width="500" border="1" cellpadding="3">
  <cfform action="" method="POST">
      <tr>
        <td align="center"><strong>ID</strong></td>
        <td align="center"><strong>DESCRIPTION</strong></td>
        <td align="center">
         <strong>SAY IT</strong>
        </td>
      </tr>
      <tr>
         <td align="center">a</td>
         <td>
          The&nbsp;field&nbsp;with&nbsp;no&nbsp;name
         </td>
         <td>
          <cfinput type="Text" name="aaa" value="">
         </td>
       </tr>
       <tr id="tr1" style="display:none">
         <td align="center">a1</td>
         <td>Add-on1</td>
         <td>
            <cfinput type="Text" name="a1" value="Add-on1">
         </td>
       </tr>
       <tr id="tr2" style="display:none">
         <td align="center">a2</td>
         <td>Add-on2</td>
        <td>
          <cfinput type="Text" name="a2" value="Add-on2">
        </td>
       </tr>

      <tr id="tr3" style="display:none">
        <td align="center">a3</td>
        <td>Add-on - Daily1</td>
        <td>
          <cfinput type="Text" name="a1d" value="Add-on - Daily1">
        </td>
      </tr>
      <tr id="tr4" style="display:none">
        <td align="center">a4</td>
        <td>Add-on - Daily2</td>
        <td>
          <cfinput type="Text" name="a2d" value="Add-on - Daily2">
        </td>
      </tr>
      <tr>
        <td colspan=3>
         <input type="submit" name="Submit" value="Submit"></td>
      </tr>
     </cfform>
   </table>

   &nbsp;
  <!--- ----------------------------------------------------------------- --->

  <table border="0">
    <tr>
      <td align="right">Add-on1:&nbsp;</td>
      <td><a href="#" id="toggle" onClick="toggle_it(this.id, 'tr1')">Add-on1</a></td>
    </tr>
     <tr>
      <td align="right">Add-on2:&nbsp;</td>
      <td><a href="#" id="toggle1" onClick="toggle_it(this.id, 'tr2')">Add-on2</a></td>
    </tr>
    <tr>
      <td align="right">Add-on3 - Daily1:&nbsp;</td>
      <td><a href="#" id="toggle2" onClick="toggle_it(this.id, 'tr3')">Add-on - Daily1</a></td>
   </tr>
   <tr>
     <td align="right">Add-on4 - Daily2:&nbsp;</td>
     <td><a href="#" id="toggle3" onClick="toggle_it(this.id, 'tr4')">Add-on - Daily2</a></td>
   </tr>
</table>
  </body>

</html>

JS

// Code goes here

function toggle_it(itemClickedID, itemID) {
  // Toggle visibility between none and '' 
  if ((document.getElementById(itemID).style.display == 'none')) {
    document.getElementById(itemID).style.display = '';
    //gets the parent element of the parent element which is the row
    document.getElementById(itemClickedID).parentElement.parentElement.style.display = 'none';
    event.preventDefault();
  } else {
    event.preventDefault();
    //gets the parent element of the parent element which is the row
    document.getElementById(itemClickedID).parentElement.parentElement.style.display = '';
    document.getElementById(itemID).style.display = 'none';
  }
}

Make the JavaScript link hide onClick

1 Answers1

Plunker