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

Accessing the i and i+1 elements within a ng-repeat iteration

I'm currently learning Angular and struggling with a seemingly simple issue. My goal is to achieve the following HTML structure in AngularJS: <div> <div> {{bar[i]}} {{bar[i+1]}} </div> <div> {{bar[i+2]}} ...

javascriptangularjsangularjs-ng-repeat

Partial functionality achieved by integrating Bootstrap for a modal form in Rails

Having an issue with a form in a partial view on Rails 3.2.3 utilizing the bootstrap 2.0.2 modals #myModal.modal .modal-header .close{"data-dismiss" => "modal"}= link_to "x", root_path %h3 Add Tags .modal-body = form_tag '/tagging& ...

javascriptruby-on-railsajaxformstwitter-bootstrap

Add a unique CSS style to both text and image using anchor tags

Why isn't the hover effect of color transition and underline being applied to the image? It seems to only work for text. While I understand that the color transition may require a change in image color, shouldn't the underline still occur? This ...

javascripthtmlcss

Interactive table on click

Seeking assistance with an issue involving a combobox (select) and a dynamic table generated from PHP. The table displays names along with their Firstname, Lastname, and ID (hidden). Upon clicking on a row in the table, I should retrieve the ID of that spe ...

javascripthtmlajax

Guide on transferring data from a component to App.vue in Vue 3, even with a router-view in the mix

I have the following layout: src components Footer.vue views Page.vue App.vue I want to access the 'message' vari ...

javascriptvue.jsvuejs3

What are the specific purposes of using fastify-plugin?

I am a beginner when it comes to the fastify framework for node.js, and I am curious about the specific purpose of using fastify-plugin. I am struggling to understand its significance as I have tried implementing code both with and without the plugin but f ...

javascriptnode.jsfastify

Is there a way to display the avatar image outside of the drawer in MUI ReactJS?

Currently, I am attempting to display the avatar image with a curved effect outside the border line of the sidebar. I have referenced the persistent drawer from MUI v5 for inspiration. You can view an example here: the codesandbox link The desired outcom ...

cssreactjsflexboxreact-hooksmaterial-ui

How to Align position:relative Divs Horizontally Using CSS

My goal is to showcase content from my website located at . I want to have the ability to place this content into a designated div where I can easily center or style it as needed. The issue arises when attempting to float the content, as it doesn't fu ...

csshtmlalignment

CSS technique for adjustable column width in HTML tables

Important Note: The HTML to PDF rendering engine I am using disables JavaScript by default, so I am seeking solutions that utilize CSS only. Within my report, there is a table utilized for accounting purposes featuring 11 columns: The first column serve ...

htmlcsshtml-table

React - 'classProperties' is not currently activated in this setting

Recently, I incorporated Truncate-react into my project. Subsequently, React prompted me to install @babel/plugin-proposal-class-properties, which I promptly added to the package.json file as follows: "babel": { "presets": ...

javascriptreactjsbabeljs

Sophisticated method in JavaScript to conceal and reveal div elements

My knowledge of front-end web development is strongest in HTML and CSS, but when it comes to JavaScript, I feel like there must be a more efficient way to achieve the functionality I want. On my website, I have a set of <li> items that, when clicked ...

javascriptjqueryhtmlcss

Removing API request in React.js

My approach: deleteSample = () => { this.sampleService .deleteCall(this.props.id) .then((response) => { window.location.reload(false); }) .catch((error) => { console.log ...

javascriptreactjstypescript

I am having trouble getting my custom CSS file to be applied to my website on Github pages

I attempted to upload a custom CSS file to apply on The raw CSS file is located at: https://raw.githubusercontent.com/themomoravi/SoundOff-Website/master/styles.css I used the following as my href since it directly links to the raw CSS file: href="http ...

htmlcssgithub

The HTML image file input restricts the user's selection to images stored in the gallery

On mobile devices, when I press the input it displays two options: camera and gallery. However, I only want to select from the gallery. How can I disable the camera option? ...

htmlinputfile-upload

Prepare for a thorough cross-referencing session

In my attempt to create a tool with 3 inputs that are interdependent - "Earn %", "Earn $" and "Own Price". Initially, the default value for "Earn percentage" is set at "10", making the initial calculation function as intended. Changing this one value auto ...

javascriptangularjsvue.js

Top approach for triggering and re-triggering AJAX using php

I'm in the process of deciphering instructions from my developer. Our approach may not be entirely correct, so I want to ensure that we are on the right track. This is our objective: On a webpage, there exists a button. When this button is clicked, I ...

javascriptphpjqueryajaxvariables

I'm having trouble modifying the backdrop to 'true' or removing it after setting it to 'static' in Bootstrap. Can anyone help me troubleshoot this issue?

I have been encountering an issue with changing the backdrop setting from 'static' to 'true' in Bootstrap modal. Here is the code I am using: $('#modal').modal({backdrop: 'static', keyboard: false, show: true}); ...

javascriptjqueryajaxtwitter-bootstrapbootstrap-modal

Tips for minimizing the arrow size in the infowindow on a Google Maps interface

As a newcomer to customizing Google Maps, I am looking to decrease the size of the arrow in the infowindow and position it in the bottom left corner for a better appearance. I am struggling to figure out how to adjust the height and width of the arrow and ...

jquerycssgoogle-mapsgoogle-maps-api-3

Is there a reason why the Chrome browser doesn't trigger a popstate event when using the back

JavaScript: $(document).ready(function() { window.history.replaceState({some JSON}, "tittle", aHref); $(window).bind("popstate", function(){ alert("hello~"); }); }); Upon the initial loading of the www.example.com page, the above JavaScript code is ex ...

javascriptjqueryhtmlgoogle-chrome

Utilizing Material UI Grid spacing in ReactJS

I'm encountering an issue with Material UI grid. Whenever I increase the spacing above 0, the Grid does not fit the screen properly and a bottom slider is visible, allowing me to move the page horizontally slightly. Here is the simplified code snippe ...

javascriptcssreactjsmaterial-ui