2 tables one for desktop and one for mobile

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

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

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

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

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

https://www.oryxdentalsoftware.com/tablecomparison-final-1

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

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