With my preexisting knowledge (for example this one) I have seen so far that a div container can easily be toggled (i.e. 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>

With my preexisting knowledge (for example this one) I have seen so far that a div container can easily be toggled (i.e. 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>

• javascript
• jquery
• html
• css

• Usually accordions are done using nested structures, like the site you linked, as each "main" link could have a number of sub links. In a flat table like you have there is no easy way to link the first TR to the next two, but not (say) the third and fourth. Any chance you can try a pre-built accordion library? – James Commented Jul 12, 2017 at 16:03
• Use Bootstrap's Collapse w3schools./bootstrap/bootstrap_collapse.asp – Thielicious Commented Jul 12, 2017 at 16:07

6 Answers 6

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

You can find it here in detail.

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

    });
</script>

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

http://materializecss./collapsible.html

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>

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.

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.cn/bootstrap-table/#options/sub-table.html

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