Building a collapsible table using Materialize CSS

I am struggling to recreate a similar setup as this query but with materialize css instead.

Materializecss Collapsible seems like it should be simple to integrate into a table structure, but I'm unsure of the process.

If someone could offer a practical example, that would be greatly appreciated.

I've tried creating a basic Jsfiddle example without success.

<table class="striped">
  <thead>
    <tr>
      <th data-field="id">Name</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
  <tbody class="collapsible" data-collapsible="accordion">
    <tr class="collapsible-header">
      <td>Alvin</td>
      <td>Eclair</td>
      <td>$0.87</td>
    </tr>
    <tr class="collapsible-body">
      <td>Alan</td>
      <td>Jellybean</td>
      <td>$3.76</td>
    </tr>
  </tbody>
</table>

Answer №1

Although this information may be outdated, it could still be helpful for others who are curious.

According to MaterializeCSS 0.97.7 documentation, the framework is expecting the following structure:

(> li > .collapsible-header)
(> li > .collapsible-body)

Aligning the headers properly can be a bit tricky. Here's what I did in my test scenario: https://jsfiddle.net/xyz123/

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

Permit the use of HTML tags within a CSS-only tooltip

I have created a unique CSS tooltip. <span data-tooltip="The security code is a 3-digit number<br />on the back of your Visa or Mastercard debit or credit card, or a 4-digit number on the front of your American Express card.">Help</span> ...

Ensure that the content remains at the center of the screen, but is dynamic and changes

I have a unique concept I want to experiment with, but I'm unsure of the best approach to take. My idea involves centering content on the screen and instead of having it scroll off and new content scroll in, I would like it to stay centered and smoot ...

Creating Circular Trails during Animation in D3.js

Currently, I am creating circles with each update that smoothly transition from one position to another. Below is the code snippet I am utilizing... function drawChart(newData) { var circles = slider.selectAll(".dot") .data(newData); circl ...

Utilizing a Clear Button to Reset Specific Fields in a Form Without Clearing the Entire Form

I am currently working on a multipart form that includes 'Name', 'Email', and 'Phone Number' fields. It's important to note that the phone number field is actually composed of 10 individual single-digit fields. To enhan ...

Determine the position within the DOM of a webpage and dynamically update the navigation menu classes to reflect the changes

Help! I am trying to create a navigation menu with links that direct users to specific parts of my page. I want to use JavaScript to add a class to each navigation menu item when the scroll bar reaches the corresponding section in the HTML. I think I know ...

Creating visually appealing tables in React.js

Having trouble with table rendering in React. The buttons in the table cell are not styled properly and do not center within their div. Additionally, the table border is cut off where there are buttons or empty headers. Need help figuring out what's g ...

Customizing default elements in A-frame: Tips and Tricks

One of the default components attached to an A-frame entity is rotation and position. I am looking to customize these components and apply the changes to the entities. For instance, I would like to create a new component called "positionnew" with a differ ...

My HTML Won't Recognize the CSS File

Despite trying various paths and browsers, I am unable to link my CSS file to my HTML file. When inspecting the page elements and checking under resources, the CSS file does not appear. Here is a snippet of my HTML: <html> <head> <meta ...

Manipulate the label content of the last child using Javascript

On my BigCommerce website, I am trying to change the label text of a variable using a JavaScript function since the support team is unable to assist with this. Below is the code snippet that needs modification: <dd class="GiftCertificateThemeList" st ...

The offset value was inconsistent in the desktop version of Firefox

Could you take a look at my code on the fiddle link, Here is the code snippet: <body> <div id="content" style="width:400px; height:110px;"> <svg id="circle" height="300" width="300"> <circle cx="150" cy="150" r="40" st ...

The file type input is not directing to the correct folder in Internet Explorer version 9

Could someone please assist me with this problem in IE9? After I select a file to upload, then choose another one, it shows "fakepath" in IE9. See the image below for more information: https://i.sstatic.net/QsJFk.png https://i.sstatic.net/3nWRC.png htt ...

What is the process for configuring text on an md-Switch?

I need help setting informational text on an md-switch element from Angular Material design. I want the user to be able to easily understand the current state of a field value. Here is a visual example of what I'm trying to achieve: https://i.sstatic. ...

Tips for inserting HTML content into a Flex TextArea

There was once a panel where I had added a fadeIn show effect. Initially, the effect only applied to the panel itself, with text appearing without the desired fadeIn effect. Fortunately, a colleague suggested embedding the fonts, which miraculously solved ...

Reorder children in a column layout with the top and bottom child elements reversed

I am attempting to create a layout using flex-direction: column-reverse in order to swap the positions of button 1 and button 2 without modifying the HTML: <button>2</button> <button>1</button> Unfortunately, I'm encountering ...

Hide the footer DIV in CSS by making it disappear with a height of 100%

I'm currently facing an issue with my CSS layout. Despite managing the problem in IE and seeing everything work well, the footer container has mysteriously disappeared! I've attempted to recode the CSS without success, even after trying for days ...

Emphasize entries in an index that match the currently visible content as you scroll

I have a table of contents in my HTML page with the CSS attribute position: fixed;. I want to emphasize the current reading position by highlighting it (bold or italics) as I scroll down the page. | yada yada yada ... 1. Secti ...

CSS - Struggling with Aligning Button Elements

I'm struggling to align buttons correctly on my webpage. Here's what I have so far: <div class="containerBoxes"> <div class="search"> <form id="search-form" action="search.aspx" ...

Prevent background from collapsing by considering the context

I am facing an issue with a div that contains a background image and some text. I need the text within the div to not overlap with a specific part of the background image (the ribbon part). Please refer to the images linked below for a clearer understandin ...

Behaviour of form inputs/divs within labels in Firefox

I have encountered an issue while submitting a form through javascript as a callback of a label click. Surprisingly, it works perfectly on all browsers except for Firefox, specifically the version FF24 which I am currently testing on. Let's take a lo ...

Rearranging the layout of elements: CSS switches up the text and button,

Having an issue. I created a background image with gradient colors for my web project and clipped it. Within this element, there is text and a button that I want to be centered inside the element - with the text above and the button below. Initially, ever ...