Steps to dynamically reveal a table row within another row when clicked:

I have a table and I want to show the contents of another row inside the current row when the plus icon is clicked. I'm not sure which HTML element to use for this. Please help me figure it out.

Thank you in advance.

<div class="procedure-table">
    <table class="table" style="border: 2px slide;">
        <thead>
            <tr>
                <th>Procedure Name</th>
                <th>Cost</th>
                <th>Taxes</th>
                <th>Notes</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="proce-td">
                    <ul>
                        <li>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting ghj industry.<span><a href="">[+]</a></span>
                            </p>
                        </li>
                    </ul>
                </td>
                <td class="cost-td">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
                <td class="taxes-td">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
                <td>
                    <div class="note-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                    <i class="material-icons close-icon2">close</i>
                    <i class="material-icons edit-icon">edit</i>
                </td>
            </tr>
        </tbody>
    </table>
</div>
javascripthtmlcssexpandcollapsable

Answer №1

Are you interested in something like this?

jQuery(document).ready(function() {
jQuery(".arrow_btn").click(function() {
var accor_id = jQuery(this).closest('tr').next('tr').attr("id");
var accor_elm = '';
accor_elm = "#"+accor_id;
if (jQuery(accor_elm).is(':visible')) {
jQuery(accor_elm).hide('300');
} else {
jQuery(accor_elm).toggle('slow');
jQuery(".accrdn_class").not(accor_elm).hide('300');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr class="">
<th>Procedure Name</th>
        <th>Cost</th>
        <th>Taxes</th>
        <th>Notes</th>
</tr>
</thead>

<tr class="all_con_area">
<td class="arrow_btn">Tester</td>
<td class="arrow_btn">Test</td>
<td class="arrow_btn"> Design</td> 
<td class="arrow_img "><a href="#" class="arrow_btn">[+]</a></td> 
</tr>
<tr id="satisfication_1" class="accrdn_class" style="display: table-row;">
<td colspan="5" class="temonial_cont"><div class="row head_inner_page">
<div class="col-md-4 col-sm-4 col-xs-12">
<table class="table inner_page_table">
        <tbody>
        <tr>
        <td><p><span>Client Name<span style="float:right;">:&nbsp;&nbsp;</span></span></p></td>
        <td ><p>tester</p></td>
        </tr>
        <tr>
        <td ><p><span>Company Name<span style="float:right;">:&nbsp;&nbsp;</span></span></p></td>
        <td ><p>Test</p></td>
        </tr>
        <tr>
        <td ><p><span>Project City<span style="float:right;">:&nbsp;&nbsp;</span></span></p></td>
        <td ><p></p></td>
        </tr>
        <tr>
        <td ><p><span>Project Name<span style="float:right;">:&nbsp;&nbsp;</span></span></p></td>
        <td ><p>Test</p></td>
        </tr>
        </tbody>
       </table>
</div>

   </td>
</tr>
</table>

Answer №2

To create a toggle effect, consider using the close-icon to switch between open and close states. Utilize jQuery to trigger events for opening (via appendChild or insertAfter) and closing (removeChild or simply remove).

jQuery(document).ready(function() {
    jQuery("#plus").click(function() {
        $("#main").append('<tr><td>A</td><td>B</td><td>C</td><td>D</td><td></td></tr>');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="main">
<tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td><a href="#" id="plus">[+]</a></td>
</tr>
</table>

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

Connect my php search outcomes to a different webpage

Hello, I am new to the world of php and I have written a search result function that allows users to click on items. However, I am facing an issue with making a specific search item clickable to open in another page with full details. Below is the code I h ...

phphtml

The Math.random() function is responsible for producing a single random number

I have a unique idea for a keyboard that generates divs when keys are pressed. The keyboard functionality has already been implemented. Each div should be positioned randomly on the screen but still be grouped by letter. My approach involves adding a rando ...

javascriptjqueryrandom

The process of incorporating user properties into the output of a Service Bus topic from a Javascript Azure Function

I'm currently developing a TypeScript Azure Function that utilizes an Azure Service Bus topic as its output. Although I am able to send messages successfully, I have encountered difficulties in setting custom metadata properties for the message. In m ...

javascripttypescriptazureazure-functionsazureservicebus

What is the best method for combining numerous tiles within a level in Kaboom JS?

Creating a level in kaboomJS with a extensive tile map collisions can sometimes result in slower performance. I'm exploring options to optimize this process, such as potentially merging multiple tiles together so that a whole row of blocks could funct ...

javascriptkaboom

The number range filter in ng-table is malfunctioning

what I am trying to accomplish My goal is to create a column that can accommodate two numbers in order to filter numeric data within a specific range for that column. While sorting, pagination, and filtering by 'contain text' are working correct ...

javascriptangularjsngtable

Guide on transforming Json information into the preferred layout and iterating through the loop

Currently, I am diving deep into the world of JSON and feeling a bit puzzled by data formats, arrays, objects, and strings. First things first, I'm in need of data structured like this (on a jQuery page). Would this be considered an object or an arra ...

javascriptphpjqueryjsonajax

How to selectively load specific scripts in index.html with the use of angular.js

Let me address a problem I'm facing with a large development project. It seems that the current setup does not function properly on Internet Explorer. My idea is to only load files that are compatible and do not generate errors when accessed through I ...

javascriptangularjs

Using AJAX, JQuery, and PHP to convert a given name to match the columns in a query, utilizing the data sent

One thing that I'm wondering about is how PHP handles my ajax requests. For example, consider the following code snippet: $("#addUser").on('click', '.btnAddSubmitFormModal', function() { $.post("add.php", { ...

javascriptphpajax

When errors occur while printing HTML through an Ajax request, it can hinder the functionality of other JavaScript code

I recently conducted an interesting experiment on my website. The concept involved sending an AJAX request to a PHP file, which then retrieved a random website by using various random words for search queries on Google. The retrieved website content was th ...

javascriptphpjqueryhtmlajax

The Issue of Anti Forgery Token Not Functioning Properly with Ajax JSON.stringify Post

I have been attempting to utilize an Anti Forgery token with JSON.stringify, but despite researching multiple sources, I have not been successful. Below is my AJAX code for deleting some information without any issues. Upon adding the anti forgery token, I ...

javascriptajaxasp.net-mvcjsonjquery

Step-by-step tutorial on designing an input slider to dynamically adjust the CSS :before linear-gradient values

Is there a way to achieve a gradient effect using pseudo-element :before on an image that can be customized by adjusting a slider input? I've been trying to implement this feature with the following code, but have not been successful so far. var ...

javascripthtmljquerycss

The act of employing `Function.prototype.run` within an Angular TypeScript class is deemed as illegitimate

Is there a way to globally define a new function called run within my Angular component as shown below? Function.prototype.run = function (delay: number) { // some content; }; However, the compiler shows an error that the Property 'run' does n ...

javascriptangulartypescript

Currently trapped within the confines of a Next.js 13 application directory, grappling with the implementation of a

I need to figure out how to export a variable from one component to layout.tsx in such a way that it is not exported as a function, which is currently causing the conditional check in the class name to always be true. Below is the code snippet: // File w ...

javascriptreactjstypescriptnext.jsnext.js13

Shifting Directive Logic to a Method within a Vue Component

I am currently working with a VueJS component that utilizes the style attribute in the following way: <section :style="{ backgroundImage: src && 'url(' + src + ')' }"> ... <script> export default { props: [& ...

javascriptvue.jsvuejs2vue-component

Utilizing JSON strings within an onclick function

Hey there, currently I am working on sending an encoded JSON through the onclick attribute. However, I am facing a challenge because the JSON contains strings with a lot of apostrophes and quotes which end up closing the quotes in the onclick attribute. Up ...

javascriptjson

What steps should I take to ensure this image automatically refreshes once it has been uploaded?

I have granted permission for administrative staff on our ASP.NET website to upload their profile pictures. The process is simple: just use basic file uploading controls: <img src="<%#ImageFile%>" border='0' width="150" alt="" height="1 ...

htmlfile-upload

What is the best way to ensure the font size is responsive in Laravel's welcome.blaze.php file?

On a large screen, the word "LaravelProject" and its links have ample space which I prefer. A newly created Laravel project appears differently on a small screen. When replacing "Laravel" with "LaravelProject," the wor ...

cssvue.jsbootstrap-4

Obtaining the data value from a style applied to a div element in an E-commerce platform like MyShop

I have recently started using MyShop for my online store at www.myshop.com. The programming language they use is quite different from what I am used to. For example, the total price in the basket.html script is displayed using the following code: <spa ...

javascriptjqueryhtmlcsse-commerce

Using the identical code, Wicked PDF generates distinct reports on separate computers

While utilizing Ruby on Rails to render a PDF using WickedPDF and sending it via email, I encountered an unexpected issue. The same code is present on two separate computers, both with up-to-date versions synced from GitHub. However, the generated PDF repo ...

htmlcssruby-on-railswicked-pdf

Exploring the Interaction Between Node.js and a Windows 10 Server on a Local Machine

I am curious about the interaction between Nodejs Server and a local machine. Specifically, I would like to understand how tasks such as: Thread Level CPU Cycle Socket Level IO Any help in clarifying this process would be greatly appreciated. ...

javascriptnode.jswindowsmongodb