Jump to content

How to create a table with accordion features.

Recommended Posts

Yes, that should be very possible, here are some resources on add a read more:

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

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

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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
  • 5 months later...

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.