Hide-1 (Table/Text/Content): 1-Section

-

 Hide (Table/Text/Content): 1-Section 

( 2-Section Link )
( Multi-Section Link )

Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toggle Data Table</title>
</head>
<body>
  <h2>Data Table</h2>
  <div style="background: lightgrey; padding: 0px;">
    <button id="Stock-toggle-Button" onclick="StocktoggleTable()" style="width: 100%; text-align: left;">Stock (Show Table)</button>
   
    <table border="1" id="Stock-data-Table" style="display: none;">
      <thead>
        <tr>
          <th>Item</th>
          <th>Name</th>
          <th>Age</th>
          <th>City</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>John Doe</td>
          <td>28</td>
          <td>New York</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jane Smith</td>
          <td>34</td>
          <td>Los Angeles</td>
        </tr>
      </tbody>
    </table>
  </div><br>
  
  <script>
    function StocktoggleTable() {
      const table = document.getElementById("Stock-data-Table");
      const toggleButton = document.getElementById("Stock-toggle-Button");
  
      if (table.style.display === "none") {
        table.style.display = "table";
        toggleButton.textContent = "Stock (Hide Table)";
      } else {
        table.style.display = "none";
        toggleButton.textContent = "Stock (Show Table)";
      }
    }
  </script>
</body>
</html>


Data Table



Comments

Post a Comment

Popular posts from this blog

Text Designing "Formatting" HTML elements : html

-
Text designing "Formatting" HTML elements : 1. function Element -"<b>": Example - This text is bold Code -  <p><b>This text is bold</b></p> 2.  function Elements -"<uppercase>": (text-transform:) Example - This text is important! Code -  <p><strong>This text is important!</strong></p> 2.  function Elements -"<capitalize>": (text-transform:) Example - This Text is Important! Code -  <p><strong>This text is important!</strong></p> 2.  function Elements -"<lowercase>": (text-tranform:) Example - this text is important! Code -  <p><strong>This text is important!</strong></p> 2. function Elements -"<strong>": Example - This text is important! Code -  <p><strong>This text is important!</strong></p> 3. function Elements -"<i>": Example - italic text ...
Read more

Click Count Data Page: Spin/Vote

-
  Click Count Data Page: Spin/Vote  Code: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Voting Page</title>     <script>         let candidates = {             candidate1: { votes: 0, currentGap: 1, prevGapHistory: [] },             candidate2: { votes: 0, currentGap: 1, prevGapHistory: [] },             candidate3: { votes: 0, currentGap: 1, prevGapHistory: [] },             candidate4: { votes: 0, currentGap: 1, prevGapHistory: [] },             candidate5: { votes: 0, currentGap: 1, prevGapHistory: [] },             candidate6: { votes: 0, currentGap: 1, prevGapHistory: [] } // New cand...
Read more