Toggle plus/minus table hide/show

In this example below you will see how to do a Toggle plus/minus table hide/show with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mush_el, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mush_el ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Toggle plus/minus table hide/show</title>
  <script src="https://use.fontawesome.com/9f375254cc.js"></script>
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h2>~ Toggle the plus to minus with a click ~</h2>
<div class="middle big">
  <table>
    <thead>
    <tr>
      <th>+</th>
      <th>a</th>
      <th>b</th>
      <th>3</th>
      <th>4</th>
     
    </tr>
    </thead>
    <tbody id="tgl-container">
      <tr>
        <td id="plus_toggle_1"><i class="fa fa-plus-square"></i>
          <div id="detail_1" style="display:none;">
          <table>
            <thead>
              <tr>
                <th class="empty"></th>
                <th class="empty"></th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="empty"></td>
                <td class="empty"></td>
                <td>a</td>
                <td>b</td>
                <td>c</td>
              </tr>
              <tr>
                <td class="empty"></td>
                <td class="empty"></td>
                <td>d</td>
                <td>e</td>
                <td>f</td>
              </tr>
              <tfoot>
                <tr>
                  <th class="empty"></th>
                  <th class="empty"></th>
                  <th>g</th>
                  <th>h</th>
                  <th>i</th>
                </tr>
              </tfoot>
            </tbody>
          </table>
        </div>
        </td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      
      </tr>
       <tr>
        <td id="plus_toggle_2"><i class="fa fa-plus-square"></i>
        <div id="detail_2" style="display:none;">
        <table  >
            <thead>
              <tr>
                <th class="empty"></th>
                <th class="empty"></th>
                <th>1</th>
                <th>2</th>
                <th>3</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="empty"></td>
                <td class="empty"></td>
                <td>a</td>
                <td>b</td>
                <td>c</td>
              </tr>
              <tr>
                <td class="empty"></td>
                <td class="empty"></td>
                <td>d</td>
                <td>e</td>
                <td>f</td>
              </tr>
              <tfoot>
                <tr>
                  <th class="empty"></th>
                  <th class="empty"></th>
                  <th>g</th>
                  <th>h</th>
                  <th>i</th>
                </tr>
              </tfoot>
            </tbody>
          </table>
</div>
         </td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th colspan="2">totals</th>       
        <th>2</th>
        <th>3</th>
        <th>4</th>
       
      </tr>
    </tfoot>
  </table>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mush_el/toggle-plusminus-table-hideshow-BLGgwQ */
h2 {
  text-align: center;
}
.middle {
  margin: 10px auto;
  text-align: center;
}
.big {
  font-size: 20px;
}
table {
  border: 4px solid #bada55;
  margin: 10px auto;
}
td,
th {
  padding: 0px 30px;
  border: 1px solid #ccc;
  vertical-align: top;
  text-align: center;
}
th:first-child,
td:first-child {
  width: 10px;
  color: purple;
}
table div {
  margin: 0 -324px 0px -31px;
  position: relative;
  z-index: 1;
  border-top: 1px solid #f0c;
}
thead,
tfoot {
  background: #222;
  color: #efefef;
}
thead .empty,
tfoot .empty,
td.empty {
  background: #fff;
  border: 0px solid #fff;
}
tr:hover {
  background: #;
}
table table {
  border: 0px solid #fff;
  width: auto;
  margin: 0px;
  display: inline-block;
  float: right;
  table-layout: fixed;
}
.empty {
  width: auto;
  border: 0px solid;
}
i {
  color: #f0c;
}


/*Downloaded from https://www.codeseek.co/mush_el/toggle-plusminus-table-hideshow-BLGgwQ */
$("tbody#tgl-container tr").children("td").click(function(){

  $(this).find("i").toggleClass("fa-minus-square");
  
   var strTglId = this.id;
   var aryTglId = strTglId.split("_");
   var intTglId = aryTglId[2];
  
  $("#detail_" + intTglId).toggle();
  console.log(intTglId);
});

Comments