Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

2 tables one for desktop and one for mobile


Yaraf

Question

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
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

7 answers to this question

Recommended Posts

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

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
  • 0
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.

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
  • 0
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.

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

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