Yaraf Posted October 28, 2021 Share Posted October 28, 2021 Hello, I made a comparison table for desktop view, the table has expandable rows using js. I made another smaller table for mobile and I am willing to hide the first one on mobile, show the second etc.. but when I am inserting the second table on the same page under the main one, the expand functionality stops working. I will share the link privately Thank you Link to comment
Beyondspace Posted October 28, 2021 Share Posted October 28, 2021 (edited) 1 hour ago, Yaraf said: Hello, I made a comparison table for desktop view, the table has expandable rows using js. I made another smaller table for mobile and I am willing to hide the first one on mobile, show the second etc.. but when I am inserting the second table on the same page under the main one, the expand functionality stops working. I will share the link privately Thank you For easier checking issue, you should share your site with the protected password Edited October 28, 2021 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted October 28, 2021 Share Posted October 28, 2021 (edited) I 've found that your page is not set the event to add style display for your sub content. You can try adding to your Home > Settings > Advanced > Code injection, choose the Footer <script> /*add event click to set display*/ (function(){ document.addEventListener('DOMContentLoaded', function() { const labels = document.querySelectorAll('#collection-617a807f0ab42b17c1b04168 section[data-section-id="617a80d2dac3a9721b26375f"] tbody.labels'); labels.forEach(label => { label.addEventListener('click', function(){ const hideArea = label.nextElementSibling; if(hideArea.style.display == 'none') { hideArea.style.display = 'table-row-group'; } else { hideArea.style.display = 'none'; } }) }) }) })() </script> Let me know if it works properly on your site Support me by pressing 👍 if this useful for you Edited October 28, 2021 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Yaraf Posted October 28, 2021 Author Share Posted October 28, 2021 Hello, Thank you for your response! I pasted the code into the footer, the toggle worked on mobile but not on desktop, Also how do I make the table (on mobile) go up when the first one is hidden, and remove the white space and vice versa. Thank you Link to comment
tuanphan Posted October 31, 2021 Share Posted October 31, 2021 On 10/29/2021 at 2:31 AM, Yaraf said: Hello, Thank you for your response! I pasted the code into the footer, the toggle worked on mobile but not on desktop, Also how do I make the table (on mobile) go up when the first one is hidden, and remove the white space and vice versa. Thank you Can you share link to page where you have problem? We can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Yaraf Posted October 31, 2021 Author Share Posted October 31, 2021 https://www.oryxdentalsoftware.com/tablecomparison-final-1 Link to comment
tuanphan Posted November 2, 2021 Share Posted November 2, 2021 On 10/31/2021 at 11:26 PM, Yaraf said: https://www.oryxdentalsoftware.com/tablecomparison-final-1 Add to Design > Custom CSS /* desktop */ @media screen and (min-width:768px) { [data-section-id="617a80d2dac3a9721b26375f"] { display: none; } } /* mobile */ @media screen and (max-width:767px) { [data-section-id="617a807f0ab42b17c1b0416a"] { display: none; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Yaraf Posted November 2, 2021 Author Share Posted November 2, 2021 Hello, the spacing worked, but I am still having an issue with the toggle of the table on desktop view, it's not working. However the mobile version works on this page + the same code for the desktop version works on another page where there isn't 2 tables. Thank you 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