What is the process for toggling the expansion and collapse of a table row (tr)?

Based on my previous experience (such as this example), I have observed that a div container can be easily toggled to hide and show. However, I am facing confusion when I have content inside a tr and I wish to display and hide certain items when that tr is clicked. Let's take the example of a food menu (let's say it's "Rice"), with various submenus under that category (like "Fried rice", "Boiled rice"...). When the "Rice" item is clicked (or if there is an arrow or plus icon to click on), the submenus should be displayed. Similarly, they should be hidden when the arrow is clicked again. Please check out this website to see how they toggle the restaurant menu with the arrow key. I want to achieve the same functionality.

The code snippet I am currently working on is as follows:

    <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>
javascriptjqueryhtmlcss

Answer №1

If you're looking for a solution, consider using a class called "Accordion" that offers comparable features.

For more information and details on this class, check out this link.

Answer №2

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

    });
</script>

Answer №3

Is something along these lines what you're looking for? 

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

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

function sashimi(){
if(document.getElementById("sashimi").style.display == "none"){
document.getElementById("sashimi").style.display = "block";
}else{
document.getElementById("sashimi").style.display = "none";
}
}
 <div class="media-right">
                        <table class="table">
                            <tr>
                                <td>
                                    <a onclick="Sushi()"><h3 class="menu-title">Sushi</h3></a><div id="Sushi" style="display:none;"><ul><li>California Roll</li><li>Spicy Tuna Roll</li><li>Salmon Nigiri</li></ul></div></td> <!--make this tr expandable and collapsable-->
                                <td>
                                    <div class="menu-rate">&#36;15.00</div>
                                </td>
                            </tr>

                             <tr>
                                <td>
                                    <a onclick="sashimi()"><h3 class="menu-title">Sashimi</h3></a><div id="sashimi" style="display:none;"><ul><li>Tuna</li><li>Salmon</li><li>Yellowtail</li></ul></div></td>
                                <td>
                                    <div class="menu-rate">&#36;20.00</div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a onclick="tempura()"><h3 class="menu-title">Tempura</h3></a><div id="tempura" style="display:none;"><ul><li>Shrimp</li><li>Vegetables</li><li>Squid</li></ul></div></td>
                                <td>
                                    <div class="menu-rate">&#36;12.00</div>
                                </td>
                            </tr>
                         </table>

                    </div>

Answer №4

Do you have a requirement that specifically requires the use of a table? If not, you can make use of jQuery UI's accordion widget to achieve the same functionality easily, especially since you are already working with jQuery.

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

Check out this simple example to see how it works.

Answer №5

For those looking to streamline data presentation, consider utilizing the bootstrap-table library created by wenzhichin. Its adaptability makes it an excellent choice.

Explore subtables -

Learn about collapsing rows -

Answer №6

If you're looking for collapsible elements inspired by material design from Google, check out this link. It's incredibly user-friendly and helpful:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guidelines for permanently binding an onclick event to all elements of a specific class

Is it possible to attach the onclick event to a function without having to constantly execute the statement whenever a new .option element is created due to user interaction? $(".options").click(function(){ alert($(this).val())}) ...

jquery

Is it possible to connect to a Node server from outside the network if the application is only listening on 'localhost'?

When utilizing the Express framework and we implement app.listen(port), the app will be located at localhost:port/ On a local machine, it is clear how to access this address using a local browser running on the same machine. Even clients within the same n ...

javascriptnode.jsexpressherokudeployment

Unable to add JSON data to Javascript List Object? Consider using a combination of Node.JS and Firebase for a

router.get('/getMeals',function(req,res){ var mealsList = []; mealsList.push("bar"); mealsRef.on("value",function(data){ data.forEach(function(child){ console.log(child.val()); var newMeal = child ...

javascriptnode.jsfirebase-realtime-database

Typescript Tooltip for eCharts

I'm working on customizing the tooltip in eChart v5.0.2 using Typescript, but I'm encountering an error related to the formatter that I can't seem to resolve. The error message regarding the function keyword is as follows: Type '(param ...

javascripttypescriptecharts

Loop through an array of objects that each contain two sub-objects using ng

I'm looking to organize each data-record in an object that contains two other objects structured like this: data Object { abbData={...}, invoiceData={...}} abbData Object { service="24", conn_fee="0", month_fee="249", more...} invoiceData ...

javascriptangularjsobject

PHP File Upload with AJAX and JSON Integration for Form Submission

Here is a code snippet that demonstrates how to read data from a form, save files in a folder, and write the information to a JSON file: Javascript: var name = $("#name").val(); var image = $("#image")[0].files[0]; var model = $("#model")[0].files[0]; v ...

phpjqueryjsonajax

How can you calculate the ratio of one property value to another in AngularJS?

In my code, I am using ng-repeat to display data values from an object. <div ng-controller="myctrl"> <ul ng-repeat="number in numbers"> <li><span ng-bind="number.first"></span></li> <li><span ng-bind ...

javascriptangularjsangularjs-ng-repeat

Is the bootstrap navigation bar always hogging up valuable space?

Currently, I am diving into the world of react while also incorporating bootstrap styles. My current project involves creating a navigation bar using bootstrap, however, I'm facing an issue where the navbar is displaying in the middle rather than wher ...

htmlcssreactjsreact-bootstrapbootstrap-5

Browser displaying a CSS error: "Invalid property name" while applying pseudo-element :after

I encountered an issue in Chrome and Explorer while attempting to set a CSS property for a pseudo element :after. (I'm trying to create a styled burger nav icon) The error message I received was: 'Unknown property name' This happened wh ...

javascripthtmlcss

Why isn't the content of the initial tab in a <section> shown when clicking a link in the side-drawer?

View the JSFiddle here. Within this MCVC, a side drawer is implemented (opened by clicking the top left button) that contains three labeled links: Link One, Link Two, and Link Three. Each link has an href attribute value that starts with "#" concatenated ...

jquerycsshtmlmaterial-design-lite

Is it possible to quickly sync API data with a CSV file for updates?

My unique code allows retrieving Amazon product prices with the ASIN (Amazon Standard Identification Number). Here is the code snippet for reference. <?php class AmazonAPI { // Code implementation details here } ?> To display the price, use ...

javascriptphpjqueryajaxcsv

Having trouble with integrating user input from HTML into a JavaScript file to execute a GET request

I am currently working on a project to create a website that integrates the google books API for users to search for books. To start, I have set up a server using express in index.js at the root of the project directory, and all my static files are stored ...

javascripthtmlexpress

The Material UI Select Component has the ability to transform a controlled text input into an uncontrolled one

I encountered a warning in the console while trying to update the value of a Select input. The warning message is as follows: index.js:1446 Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not swi ...

javascriptreactjsmaterial-ui

JavaScript function for submitting form data using AJAX and performing validation

This is the code I have been working on: $(function () { $('.contact-form').submit(function (event) { $(this).find("input , textarea").each(function () { var input = $(this); if (input.val() == "") { ...

javascriptjqueryhtmlajax

Using OPTIONS instead of GET for fetching Backbone JS model data

Currently, I am attempting to retrieve data from a REST endpoint with the help of a model. Below is the code snippet that I am using: professors: function(id) { professor = new ProfessorModel({ id: id }); professor.fetch({ headers: { ...

javascriptajaxresthttpbackbone.js

Is there a way to redirect the user directly to the upload page without displaying the response?

Recently, I came across this code snippet that adds a progress bar to an upload form. Currently, the code displays the response from the upload page below the form. However, my goal is to redirect the user to the upload page so they can view the response t ...

javascriptphpjqueryhtmlajax

Automatically submitting the selection when it changes

I am facing an issue with a selection form that is supposed to update the database on change using jQuery, but it seems like nothing is happening. Can anyone provide assistance with this problem? <SELECT name='status' id='status'> ...

javascriptphpjquery

Utilize external URL in trigger.io's custom UIWebView component

I'm in the process of transitioning my existing backbone application, designed for a native iOS UIWebView, over to trigger.io in order to utilize its image caching and camera access features. The goal is to make this migration quickly and efficiently. ...

javascriptiostrigger.io

Ensure the user is authenticated following an asynchronous request

Currently, I am working with Cake PHP 2.4 and encountering an issue where my AJAX requests fail to work after the session has been idle for a while or if the user logs out in another tab. This is due to the fact that the user is already logged out when the ...

phpjqueryajaxcakephp

Identifying when floats exceed their limits

Is there a way to identify overflow on floating elements? It's important to note the difference between setting overflow to visible or hidden. overflow: visible; overflow: hidden; Do all floated elements inherently contain overflow? Why is it chal ...

csscss-floatoverflow