Is there a way to incorporate the Bootstrap 4.0.0 Collapse feature into an HTML table?

Hi there! I have a question about adding collapsible elements to an HTML table. Below is my code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b7babaa1a6a1a7b4a595e1fbe3fbe7">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc968d89998e85bccfd2c9d2cd">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9a8998a8dcc6dec6da">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">Type</th>
      <th class="d-none d-md-table-cell" scope="col">Old Permalink</th>
      <th class="d-none d-md-table-cell" scope="col">New Permalink</th>
      <th class="text-center d-none d-md-table-cell" scope="col">Remove</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table content goes here -->
  </tbody>
</table>

I would like to know how I can make it so that clicking on the "301" row collapses the rest of the table. Here are some visual examples:

When the highlighted 301 row is pressed, all other data should collapse.

https://i.sstatic.net/rGngR.png

After collapsing the data by pressing the 301 row:

https://i.sstatic.net/0JyaR.png

Thank you for your help! Please provide guidance on using Bootstrap CSS and JS files (included in the Bootstrap 4.0.0 ZIP).

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

While Bootstrap may not offer this specific functionality, there is an alternative solution available that accomplishes the same goal. If you're experiencing difficulties with Bootstrap, you can check out a styled version of the feature here: https://codepen.io/shikkaba/pen/qBKbrWm

By clicking on a table row within the tbody section, all sibling rows with a class of .option will be hidden, revealing the next row in line. Each "answer" must already have the necessary class applied to enable this function to work correctly, as it essentially involves toggling a class.

$("table tbody tr.option").click(function() {
  // Show current `tr` and hide others
  $(this).siblings(".option").toggleClass("hide");
  $(this).next().toggleClass("hide");
});
.hide {
  display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">Type</th>
      <th class="d-none d-md-table-cell" scope="col">Old Permalink</th>
      <th class="d-none d-md-table-cell" scope="col">New Permalink</th>
      <th class="text-center d-none d-md-table-cell" scope="col">Remove</th>
    </tr>
  </thead>
  <tbody>
    <tr class="d-none d-md-table-row option">
      <th scope="row" data-label="Type">301</th>
      <td data-label="Old Permalink">XX</td>
      <td data-label="New Permalink">XX</td>
      <td align="center" data-label="Delete Record">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row  hide">
      <th>301</th>
      <td data-label="Old Permalink">
        <strong>Old Permalink:</strong> XX
      </td>
      <td data-label="New Permalink">
        <strong>New Permalink:</strong> XX
      </td>
      <td align="center">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row option">
      <th scope="row" data-label="Type">302</th>
      <td data-label="Old Permalink">XX</td>
      <td data-label="New Permalink">XX</td>
      <td align="center" data-label="Delete Record">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row  hide">
      <th>302</th>
      <td data-label="Old Permalink">
        <strong>Old Permalink:</strong> XX
      </td>
      <td data-label="New Permalink">
        <strong>New Permalink:</strong> XX
      </td>
      <td align="center">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row  option">
      <th scope="row" data-label="Type">303</th>
      <td data-label="Old Permalink">XX</td>
      <td data-label="New Permalink">XX</td>
      <td align="center" data-label="Delete Record">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row hide">
      <th>303</th>
      <td data-label="Old Permalink">
        <strong>Old Permalink:</strong> XX
      </td>
      <td data-label="New Permalink">
        <strong>New Permalink:</strong> XX
      </td>
      <td align="center">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </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

The menu bar fails to maintain its responsiveness once the breakpoint is reached

The issue I am facing is that the menu bar does not resize properly when the browser window size is less than 900px. This results in the bar being too wide, some content going off the screen, and a horizontal scrollbar appearing. I have been trying to tro ...

jquerycssdrop-down-menuresponsive-designnavigation

Alternative to using the disabled attribute in JavaScript to make a checkbox read-only option

Does anyone know how to make a checkbox readonly so that its value can be submitted, while also disabling it? Using the disable attribute prevents the value from being submitted, and setting it as readonly doesn't seem to work for checkboxes. Your as ...

javascriptjqueryhtmlcss

JQuery Multi-Filterizer

My webpage showcases a list of posts from custom-post-type. For each post, I am displaying the title, status, and category: <div class="adherents"> <article class="adh-1185 association work adh"> <h2>Title</h2> ...

phpjqueryhtmlwordpress

Switching between various dropdown options does not produce any noticeable differences in the (React) interface

I am experiencing an issue with my dropdown menu where selecting different values no longer triggers any changes. This was working perfectly fine before. Below is the code I am using: context.js: import React, { useState, useEffect } from 'react&apo ...

javascripthtmlreactjsdrop-down-menustate

How can I create an HTML form input slider/range that accepts non-numeric values?

<input type="range" min="2" max="52" value="4" step="1"/> Is it possible to have an input range with non-numeric intervals, such as "Yes," "maybe," and "no"? Appreciate any guidance on this. Thank you. ...

jqueryhtmlinputrange

Restrict certain sections of the website to authorized users only

In my game project, players are presented with two options: to play the game itself or to view global and local highscores. I have implemented a signup and login system where upon successful login, users can choose among playing the game, checking highscor ...

javascripthtmlnode.jsexpressserver

Tips on toggling the visibility of a div using jQuery and CSS via a toggle switch

Hey there, I need some help with toggling the opening and closing of a div when clicking on a toggle switch. $('.tog').on('click', function() { $('.cntr').show(); }); .switch { position: relative; display: inline-bloc ...

jqueryhtmlcss

Enhance your Angular application with stylish PrimeNG Menubars

I am currently working on a project using primeng 4.3.0 & Angular 4, where I am designing a horizontal menu for my various pages. Unfortunately, I am unable to update the version of these components, hence I have a question: While utilizing the menubar an ...

htmlangulartypescriptsassprimeng

Trouble with CSS transitions not functioning while altering React state

Each time a user clicks on an accordion, the content should smoothly show or hide with a transition effect. However, the transition only seems to work when opening a closed accordion, not when closing an already open one! To get a clearer idea of this iss ...

javascriptcssreactjsnext.jssass

Utilizing CSS for styling a specific class in a Joomla Module

Recently, I was working on a Joomla Module and came across an interesting issue. When inspecting the CSS using Firebug, I noticed that there were multiple nested divs within the module, each with its own class. One example of this structure looked like: & ...

phphtmlcssjoomla

Utilizing AJAX and PHP to update an input field by returning a variable to the initial AJAX script

One of the measures I've implemented to secure my forms is adding a captcha code to deter bots from submitting an excessive amount of forms. The form operates using AJAX, eliminating the need for page refreshing upon submission. I have configured eve ...

phphtmlajax

How can I adjust my settings so that my image resizes from the center rather than the top left corner?

I'm having an issue with my code for resizing images on rollover - the image is currently resizing from the top left corner instead of from the center. How can I adjust it to resize from the center of the image? <script> $('i ...

jqueryhtml

Why does Internet Explorer display .png images in lower quality compared to other browsers?

My menu displays a .png file with smooth edges in most browsers, but in Internet Explorer it appears with rough edges. Can someone help me understand why IE treats .png files differently compared to other browsers? <li> <a href="" onclick=" ...

htmlcssinternet-explorer

Gradient scroll effect for dynamic backgrounds

I am currently working on a code where I want the background to scroll instead of the text. This means that the text will stay fixed in its position while the background scrolls behind it on the page. Any suggestions on how I can achieve this? For an ex ...

cssreactjsscrollfrontend

Determine the size of the file as well as the width and height of the image

Is there a way to retrieve the file size, image height and width prior to uploading them to my website using either jQuery or JavaScript? ...

javascriptjqueryhtmldimensionsimage-size

What is the process for extracting the value of a checkbox generated through JavaScript?

I recently came across a helpful post on Stack Overflow that provided sample code demonstrating how to display multiple list of checkboxes dynamically on a dropdown list. The function in the code was exactly what I needed for my webpage. However, I encount ...

javascripthtml

Trouble with toggling functions in PHP and JavaScript

I'm encountering a small issue with a PHP and JavaScript page. What I want to achieve is to display a table of categories where users can toggle to grant or remove access. I've almost got it working, but there's a minor problem. When I clic ...

javascriptphphtmljquery

Is it possible to automatically adjust the size of components on a html/cshtml page based on the current window size?

Currently, I am facing an issue with my website where multiple panels are created using a foreach loop that includes textareas/textboxes. Whenever I resize my browser window, it messes up the UI by shifting the position of the textareas and other elements. ...

javascripthtmlcssrazorasp.net-mvc-5

The sixth character that is not in SGML format

I encountered a validation error while working on a website project Line 1, Column 1: non SGML character number 6 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.… In Firefox source viewer, certain lines are highlight ...

phphtmlvalidationcodeignitersgml

What is the best way to display the letter X (Clear) in the Chrome INPUT field with the type

A custom application was developed that utilizes an input field of the number type: <input type="number" min="-1000000" max="1000000" step="0.01"> Within Internet Explorer, there is a small "clear" or [X] button on the right side of the input field ...

javascriptjquerycssinputtextbox