Tips on Creating a Display None Row with a Sliding Down Animation Using Javascript

I am working with a table that has some hidden rows which only appear when the "show" button is clicked. I want to know how I can make these hidden rows slide down with an effect. Here's the snippet of my code:

function toggleRow(e){
    var subRow = e.parentNode.parentNode.nextElementSibling;
    subRow.style.display = subRow.style.display === 'none' ? 'table-row' : 'none';    
}
.subRow {
    background-color: #CFCFCF; display:none;
}
<table style="width:50%" border="1">
    <caption>Test Table</caption>
    <thead>
        <tr align="center" class="parentRow">
            <th>Column 1</th>
            <th>Column 2</th>               
            <th>Column 3</th>               
            <th>Column 4</th>               
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr class="parentRow">
            <td><a href="JavaScript:Void(0);" onclick="toggleRow(this);">SHOW</a></td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
        </tr>
        <tr class="subRow">
            <td colspan="5"><p>Lorem ipsum dolor sit amet...</p></td>
        </tr>
      <tr  class="parentRow">
   <td><a href="JavaScript:Void(0);" onclick="toggleRow(this);">SHOW</a></td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
        </tr>
        <tr class="subRow">
            <td colspan="5"><p>Lorem ipsum dolor sit amet...</p></td>
        </tr>

    </tbody>
</table>
javascriptjqueryhtmlcss

Answer №1

Instead of directly modifying the CSS properties, I would suggest toggling a class instead.

In addition, I have updated the href attribute from href="JavaScript:Void(0);" to href="#" in order to prevent any script errors.

Since it's not possible to animate a table-row, I have introduced an additional div element with the animation applied to its max-height property.

It is important to note that animating the height property can be tricky. In this case, using max-height requires setting a value higher than the content at all times. If this is not feasible, a script might be necessary to calculate the content height before applying the transition.

function toggleRow(e){
    var subRow = e.parentNode.parentNode.nextElementSibling;
    subRow.classList.toggle('RowShow');
    return false;
}
.subRow td {
  background-color: #CFCFCF;
  padding: 0;
  border: 0;
}
.subRow div {
  max-height: 0;
  transition: max-height 0.5s;
  overflow: hidden;
}
.subRow.RowShow div {
  max-height: 100px;
  transition: max-height 1s;
}
<table style="width:50%" border="1">
    <caption>Test Table</caption>
    <thead>
        <tr align="center" class="parentRow">
            <th>Column 1</th>
            <th>Column 2</th>               
            <th>Column 3</th>               
            <th>Column 4</th>               
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr class="parentRow">
            <td><a href="#" onclick="return toggleRow(this);">SHOW</a></td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
        </tr>
        <tr class="subRow">
            <td colspan="5"><div><p>Lorem ipsum dolor sit amet...</p></div></td>
        </tr>
      <tr  class="parentRow">
   <td><a href="#" onclick="return toggleRow(this);">SHOW</a></td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
        </tr>
        <tr class="subRow">
            <td colspan="5"><div><p>Lorem ipsum dolor sit amet...</p></div></td>
        </tr>

    </tbody>
</table>

Answer №2

Void should be written in lowercase, but instead I have used preventDefault.

There seems to be an issue with animating the table row because tables are being used.

If you're interested in learning more about slideToggle in a table row, check out this Stack Overflow post.

I've successfully implemented the fix for the problem.

$(function() {
  $(".show").on("click", function(e) {
    e.preventDefault();
    $(this).closest("tr").next().find(".content").slideToggle();
  });
});
.subRow {
  padding:0;
  background-color: #CFCFCF;

}
.content {
  background-color: #CFCFCF;
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table style="width:50%" border="1">
  <caption>Test Table</caption>
  <thead>
    <tr align="center" class="parentRow">
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parentRow">
      <td><a href="#" class="show">SHOW</a>
      </td>
      <td>test cell</td>
      <td>test cell</td>
      <td>test cell</td>
      <td>test cell</td>
    </tr>
    <tr class="subRow">
      <td colspan="5">
        <div class="content"><p>Lorem ipsum dolor sit amet...</p></div>
      </td>
    </tr>
    <tr class="parentRow">
      <td><a href="#" class="show">SHOW</a>
      </td>
      <td>test cell</td>
      <td>test cell</td>
      <td>test cell</td>
      <td>test cell</td>
    </tr>
    <tr class="subRow">
      <td colspan="5">
        <div class="content"><p>Lorem ipsum dolor sit amet...</p></div>
      </td>
    </tr>

  </tbody>
</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

Tips for resizing an image to fit within a col-sm-12 column in Bootstrap

I have a dilemma with two columns - I want to place my image in the first column so that the second column can move down. see image here Here is my HTML code: <div class="container-fluid"> <div class="row"> ...

htmlcssresponsive-designbootstrap-5

Is there a feature in Angular similar to Vue.js's "computed property" functionality?

After mastering Vue.js, I recently dove into Angular 4 for a new project. I've found that most things in Angular are quite similar to Vue, with the notable exception of "Computed Property". In Vue, I could easily create a computed property that would ...

javascriptangularvue.js

jQuery uploadify encountered an error: Uncaught TypeError - It is unable to read the property 'queueData' as it is undefined

Once used seamlessly, but now facing a challenge: https://i.stack.imgur.com/YG7Xq.png All connections are aligned with the provided documentation $("#file_upload").uploadify({ 'method' : 'post', 'but ...

javascriptjqueryimageuploaduploadify

A more detailed explanation of Angular's dot notation

I came across a solution for polling data using AngularJS here on stackoverflow. In this particular solution (shown below), a javascript object is used to return the response (data.response). I tried replacing the data object with a simple javascript arra ...

javascriptangularjssyntaxpollingajax-polling

Navigating to a different page on Vue2 with routes

I am struggling with redirecting to another Vue page from my script code. I tried using router.push() but it's not directing me to the desired Vue page. Here is a snippet of my source code: src/router/index.js import Vue from 'vue' import ...

javascriptvue.jsvuejs2vue-componentvue-router

Using JavaScript to assign the title property to an <a> tag

I'm currently working on modifying a code snippet that utilizes jQuery to display the "title" attribute in an HTML element using JavaScript: <a id="photo" href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><i ...

javascriptattributesset

Difficulties encountered while attempting to modify a class using Javascript

Recently, I've encountered an issue with my JavaScript where I am unable to keep a particular element's class changed. Despite attempting to change the class to "overlist", it only stays that way briefly before switching back to its original stat ...

javascripthtmlcssfunctionclass

Utilize the search bar within a JavaScript function

One issue I am facing is taking an input from a search box and using that value as a parameter for another function. However, every time I click the button, the global variable resets itself when the page refreshes. In my javascript code, this is what I h ...

javascriptjqueryhtmlsearchglobal-variables

What is causing IE10 to display such a drastically different appearance?

I am currently implementing a cool image fade swap effect using CSS and JQuery along with an image sprite. JQuery: <script type="text/javascript> $(document).ready(function() { $('.otherbutton').append('<img class="hov ...

jqueryhtmlcss

Searching for entries using an array of _id along with other possible column values

const query_id = [1,2,3,4,5,6]; const query_type = "A"; let queries = await Query.find({ _id: query_id, query_type: query_type }); The current code functions as intended, but there may be a better and more elegant way to achieve t ...

javascriptnode.jsmongodbexpressmongoose

What is the approach for incorporating JavaScript variables in Jade templates for writing inline CSS styles?

Struggling to inject CSS code dynamically? You're not alone. style(type='text/css') #header a#logo { background:url(constants.logo) no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #header a#logo { ...

cssnode.jspug

Generating hyperlinks with Laravel 5 using jquery

Currently utilizing Laravel 5, I am in the process of building an attachments list using jQuery. The file path I am working with is /files/myfile.jpg $('#attachmentList').empty(); $.each(response, function(key, val) { ...

jquerylaravellaravel-5

Tabulator - Using AJAX to retrieve a JSON document

I am currently working on importing a json file from an Azure blob container using Azure Data Factory. Despite closely following the documentation and researching various resources on Stack Overflow, I am facing challenges with making the ajax request fun ...

javascriptjsonajaxazure-data-factorytabulator

Creating two submenus in the sidebar: a step-by-step guide

I am looking to implement a feature where clicking on the sidebar menu will reveal 2 submenus. Here is what I have implemented: $(document).ready(function () { $("[data-toggle]").click(function () { var toggle_el = $(this).data("toggle"); ...

htmljquerycssjquery-mobile-navbar

Tips for maintaining selected text while a modal window is active

So I'm currently working on a document writer and I'm utilizing document.execCommand to insert links. What I aim for is the ability for a user to select/highlight text, click a button to add a link to that specific text (via a modal), and then ha ...

javascripthtmlangulartypescript

CSS-only: Align items in flexbox column with equal width and centered position, without the need for a wrapper

https://i.stack.imgur.com/vAJv2.png This particular challenge involves creating a responsive mobile menu. In this design, the width of all children is determined by the longest child element. The CSS should ensure that the .index class spans the full wi ...

htmlcssflexboxresponsive

Utilize Moment to round a date either up or down

I am using Moment to compare two datetime values. Specifically, I am utilizing Moment.isSameOrBefore function. However, my two date values are slightly different due to milliseconds. I want these two values to be considered the same: var date1 = ' ...

javascriptdatetimemomentjs

I am experiencing an issue with the initial for-loop in my code as it is not

Upon clicking the start button, the score button, as well as the try again or correct button, are not being updated. Can someone help me figure out what's wrong? I believe the issue lies within this section of the code: for (i=0; i<5; i++) { do ...

javascripthtmlcss

The process of isolating each variable within a JSON data structure

After making an ajax call, my JSON data is currently displayed in this format: {"main_object":{"id":"new","formData":"language=nl_NL&getExerciseTitle=test&question_takeAudio_exerciseWord%5B0%5D=test&Syllablescounter%5B0%5D=test&Syllablesco ...

javascriptjsonajax

Incorporate a file into all API endpoints with Next.js API functionality

Is there a way to incorporate a "bootstrap" file (a file with side-effects) as the first file included in all Next.js APIs? The main issue is that I have a Winston logger in a file that needs to be added to every API endpoint, but this process hinders dev ...

javascriptnext.js