Jump to content

2 tables one for desktop and one for mobile

Recommended Posts

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
  • Replies 7
  • Views 542
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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 by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

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 by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

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
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/31/2021 at 11:26 PM, Yaraf said:

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

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.