CODEWITHSUNDEEP
javascripthtml
stefanosn
stefanosn

Reputation: 3324

expand collapse table in html not working

I am using the code below to expand and collapse rows of a table. I have a table with 4 rows. First row has two columns. Second row has one column. Third row two columns. Fourth row two columns. I would like the first two rows to appear when the user load the page for the first time. Then when he taps the second row saying SHOW ALL FILTERS i would like the table to expand and then when tapped again the second row to collapse. How this functionality can be achieved? Please check my code. First time trying to do this with javascript, any help appreciated...

<script type="text/javascript">
$('.header').click(function(){

$(this).nextUntil('tr.header').slideToggle(1000);
});
</script>
    <table  style="padding: 10px" width="100%" border="1" bordercolor=LIGHTGREY   font-family:"Courier New", Courier, monospace; font-size:80%>
    <tr>
    <td  style="font-weight:bold" style="padding: 10px;" width="40%"  border="1" bordercolor=LIGHTGREY align="center">Brand</td>


    <td   style="padding: 10px; color:black" width="100%"  border="1" bordercolor=LIGHTGREY  align="center">
<a  style="color:black" href="/category/"  >ALCATEL</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a style="color:black" href="/category/"  >APPLE</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a style="color:black" href="/category/"  >ARCHOS</a>&nbsp;&nbsp;&nbsp;&nbsp;
</td>
</tr>

<tr align="center" class="header" >
     <td colspan="2" style="padding: 10px">SHOW ALL FILTERS</td>
 </tr>
<tr>
    <td  style="font-weight:bold" style="padding: 10px" width="40%"  border="1" bordercolor=LIGHTGREY align="center">Price Range 1</td>
    <td  style="padding: 10px" width="100%"  border="1" bordercolor=LIGHTGREY  align="center">
        <a href="/category/"  >1-50 €     50-100 €     100-200 €     200-400 €     400-800 €</a>&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
</tr>
</tr>
<tr>
    <td  style="font-weight:bold" style="padding: 10px" width="40%"  border="1" bordercolor=LIGHTGREY align="center">Price Range 2</td>
    <td  style="padding: 10px" width="100%"  border="1" bordercolor=LIGHTGREY  align="center">
        <a href="/category/"  >1-10 €     10-20 €     30-40 €     40-50 €  </a>&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
</tr>
</table>

Upvotes: 0

Views: 437

Answers (1)

Erlisar Vasquez
Erlisar Vasquez

Reputation: 460

There is actually an easier to do that. You just have to create a class that will hide the last 2 rows. Then you add a javascript that will add or remove that class on both elements upon clicking the third row.

P.S. I also added in the js, a script that changes the innerHTML of the third row. From "SHOW ALL FILTERS" to "HIDE ALL FILTERS" and vice-versa.

function toggleDisplay(){
      var last2Rows = document.getElementsByClassName('toggle');
      var clickableTd = document.getElementById('clickable-td');
      for (var i = 0; i < last2Rows.length; i++) {
        if (last2Rows[i].classList.contains("hidden")) {
            last2Rows[i].classList.remove("hidden");
            clickableTd.innerHTML = "HIDE ALL FILTERS";
        }
        else{
            last2Rows[i].classList.add("hidden");
            clickableTd.innerHTML = "SHOW ALL FILTERS";
        }
      }
    }
.hidden{
    display: none;
  }
<table  style="padding: 10px" width="100%" border="1" bordercolor=LIGHTGREY   font-family:"Courier New", Courier, monospace; font-size:80%>
    <tr>
      <td  style="font-weight:bold" style="padding: 10px;" width="40%"  border="1" bordercolor=LIGHTGREY align="center">Brand</td>
      <td   style="padding: 10px; color:black" width="100%"  border="1" bordercolor=LIGHTGREY  align="center">
        <a  style="color:black" href="/category/"  >ALCATEL</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a style="color:black" href="/category/"  >APPLE</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a style="color:black" href="/category/"  >ARCHOS</a>&nbsp;&nbsp;&nbsp;&nbsp;
      </td>
    </tr>

    <tr align="center" class="header" id="display-toggler" onclick = "toggleDisplay()">
      <td colspan="2" style="padding: 10px" id="clickable-td">SHOW ALL FILTERS</td>
    </tr>

    <tr class="toggle hidden">
      <td  style="font-weight:bold" style="padding: 10px" width="40%"  border="1" bordercolor=LIGHTGREY align="center">Price Range 1</td>
      <td  style="padding: 10px" width="100%"  border="1" bordercolor=LIGHTGREY  align="center">
          <a href="/category/"  >1-50 €     50-100 €     100-200 €     200-400 €     400-800 €</a>&nbsp;&nbsp;&nbsp;&nbsp;
      </td>
    </tr>

    <tr class="toggle hidden">
      <td  style="font-weight:bold" style="padding: 10px" width="40%"  border="1" bordercolor=LIGHTGREY align="center">Price Range 2</td>
      <td  style="padding: 10px" width="100%"  border="1" bordercolor=LIGHTGREY  align="center">
          <a href="/category/"  >1-10 €     10-20 €     30-40 €     40-50 €  </a>&nbsp;&nbsp;&nbsp;&nbsp;
      </td>
    </tr>
  </table>

Upvotes: 1

Related Questions