avanti Posted October 5, 2022 Share Posted October 5, 2022 Site URL: https://bit.ly/3EmXIWu Hello, is it possible to create a table in Squarespace 7.1 with a collapsible "show details" section underneath, like in the image attached? Sort of like an accordion with extra columns. Thanks EarvinChong 1 Link to comment
Ziggy Posted October 5, 2022 Share Posted October 5, 2022 Yes, that should be very possible, here are some resources on add a read more: EarvinChong 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
paul2009 Posted October 5, 2022 Share Posted October 5, 2022 (edited) 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 October 6, 2022 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.Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)Buy me a coffee Link to comment
avanti Posted October 6, 2022 Author Share Posted October 6, 2022 (edited) 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> Edited October 6, 2022 by avanti Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment