如何展开和折叠（即切换）表行（tr）？

Question

With my preexisting knowledge (for example this one ) I have seen so far that a div container can easily be toggled (ie hide and show). However I am pretty confused when I have some data inside tr and I want to display and hide few items once that tr is clicked. Let's consider a food menu (I name it "Rice"), and there are few sub menus under that category (I name them "Fried rice", "Boiled rice"...). Once the "Rice" is clicked (or possibly if I have a arrow or plus icon to click on), the sub menus should get displayed. Similarly, they should hide themselves once the arrow is clicked again. Please see in this website how they toggle the restaurant menu with arrow key. I want to do the exactly same thing.

The code I am working on:

    <div class="media-right">
        <table class="table">
            <tr>
                <td>
                    <a href="#"><h3 class="menu-title">Rice</h3></a>
</td> <!--make this tr expandable and collapsable-->
                <td>
                    <div class="menu-rate">&#36;100.00</div>
                </td>
            </tr>

             <tr>
                <td>
                    <a href="#"><h3 class="menu-title">Fried Rice</h3></a></td>
                <td>
                    <div class="menu-rate">&#36;50.00</div>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="#"><h3 class="menu-title">Boiled Rice</h3></a></td>
                <td>
                    <div class="menu-rate">&#36;25.00</div>
                </td>
            </tr>
         </table>   
    </div>

Answer 1

You can try a class "Accordion" which has the similar functionality.

You can find it here in detail.

Answer 2

<script>
    $(function(){
      $('.menu-rate').click(function(){
        $(this).closest('.container').toggleClass('collapsed');
      });

    });
</script>

Answer 3

Something like this?

 function Rice(){ if(document.getElementById("Rice").style.display == "none"){ document.getElementById("Rice").style.display = "block"; }else{ document.getElementById("Rice").style.display = "none"; } } function boiledRice(){ if(document.getElementById("boiledRice").style.display == "none"){ document.getElementById("boiledRice").style.display = "block"; }else{ document.getElementById("boiledRice").style.display = "none"; } } function friedRice(){ if(document.getElementById("friedRice").style.display == "none"){ document.getElementById("friedRice").style.display = "block"; }else{ document.getElementById("friedRice").style.display = "none"; } } 

  <div class="media-right"> <table class="table"> <tr> <td> <a onclick="Rice()"><h3 class="menu-title">Rice</h3></a><div id="Rice" style="display:none;"><ul><li>1</li><li>2</li><li>3</li></ul></div></td> <!--make this tr expandable and collapsable--> <td> <div class="menu-rate">&#36;100.00</div> </td> </tr> <tr> <td> <a onclick="friedRice()"><h3 class="menu-title">Fried Rice</h3></a><div id="friedRice" style="display:none;"><ul><li>1</li><li>2</li><li>3</li></ul></div></td> <td> <div class="menu-rate">&#36;50.00</div> </td> </tr> <tr> <td> <a onclick="boiledRice()"><h3 class="menu-title">Boiled Rice</h3></a><div id="boiledRice" style="display:none;"><ul><li>1</li><li>2</li><li>3</li></ul></div></td> <td> <div class="menu-rate">&#36;25.00</div> </td> </tr> </table> </div> 

Answer 4

Is there a constraint that is forcing you to utilize a table? Since you're already using jQuery, you could easily achieve this type of functionality with jQuery UI's accordion widget.

$( "#accordion" ).accordion({
  collapsible: true
});

Here's a basic example .

Answer 5

If you're open to use a library for this, you can try using bootstrap-table by wenzhichin. I find it very flexible.

Subtable - http://issues.wenzhixin.net.cn/bootstrap-table/#options/sub-table.html

Collapsing row - http://issues.wenzhixin.net.cn/bootstrap-table/#methods/expandRow-collapseRow.html

Answer 6

checkout collapsible elements on material design made by google, really helpful an easy to use:

http://materializecss.com/collapsible.html