Jump to content

How to create a table with accordion features.

Recommended Posts

  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

There isn't a built-in table feature. However but you can build the table with some HTML that you place in a Code Block. This will give you the basic table and then you’ll need to write some JavaScript to handle the show/hide function.

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Thank you both for your feedback. I figured out how to build the table in HTML but still having some issues with the show/hide function.

I tried this workaround 

but it doesn't seem to support tables or at least I'm not quite sure how to specify where the hidden text starts and ends for each table row.

I've had more luck using <details> but have only been able to do one of two things:

1. Clicking on "read more" expands the hidden text within the same cell (and not on a separate and merged table row).

2. Getting the hidden text to expand on a separate and merged row by moving the "read more" text to a new table row.

Do I need some JavaScript to get the "read more" button to expand the hidden text along a new full table row? And then hide again once "read less" is selected?

<!DOCTYPE html>
<html>
  <table border="1">
      
   <tr>
    <td>Title 1</td>
    <td>Price 1</td>
    <td><details>
    <summary>Read more 1</summary>
    Hidden text 1.
      </details>
      </td>
    <td>Buy now 1</td>
  </tr>
  <tr>   
</td>
  </tr>
    
  
  <tr>
    <td>Title 2</td>
    <td>Price 2</td>
    <td>Read more 2</td>
    <td>Buy now 2</td>
  <tr>
    <td colspan="4">
    <details>
    <summary>Read more 2</summary>
    <p> Hidden text 2.</p>
    </details>
</td>
  </tr>
  
</table>

</body>
</html>

 

Screenshot 2022-10-06 at 1.22.13 PM.png

Edited by avanti
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.