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 
Hire me on Upwork!

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

 Did I help? Buy me a coffee?

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'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

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.