CODEWITHSUNDEEP
javascripthtml
Andy
Andy

Reputation: 169

Make the JavaScript link hide onClick

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.

Upvotes: 2

Views: 977

Answers (1)

abc123
abc123

Reputation: 18803

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';
  }
}

Upvotes: 2

Related Questions