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 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) 🖼️ Gallery Lightbox Plugin (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 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide 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. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? 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