melaniejaane

Hey @emiehughes I'm in the same spot. Did you have any luck finding resources you could share? 😊

Hey @JessicaOddi what website did you do this for? Would love to see! Also what fixes did you implement to make internal pages more accessible? 🙂

I also want to split accordion block into two columns (1-3 left column, 4-6 right column) @tuanphan are you able to help? 🙂 https://beehyve.squarespace.com/services/counselling#service-page-our-tools

Does anyone know how I can target the last visible tag on a summary item? <script> $(function () { $('.summary-metadata-item--tags > a:visible:last').addClass('mk-last-visible'); }); </script> I tried using the above script. It works in code-pen but not when I add it to code injection header in Squarespace. Can anyone tell me why this isn't working and how I can fix it? I have CSS already set up to target the summary block on the Healthcare Practices tab here: website: https://beehyve.squarespace.com/adhd-support

@melody495 I would love to know that as well @tuanphan if you have the answer? I've always just used standard CSS but now I'm making much larger changes, I'm worried that the websites will look completely messed up if something isn't supported on a different browser. Are there any basic rules of thumb for types of CSS that need prefixes, and some that don't?

I have a list of CSS prefixes in bold (using 'transform' style as example): transform:/* W3C */ -webkit-transform: /* Safari and Chrome */ -moz-transform: /* Firefox */ -ms-transform: /* IE 9 */ -o-transform: /* Opera */ Is there a magic code that will automatically include prefixes for all CSS? Figure there must be a smarter way – It just seems super complicated and time consuming to go through my entire stylesheet and duplicate every line 5 times over? Thanks all 🙂

@tuanphan How do I achieve what you did with the accordion?

Screen Recording 2023-10-23 at 6.51.59 PM2.mov @tuanphan Attached video showing web response to 3 different actions. You can see how it's not working consistently unless on first page load. Any ideas how to fix this? Change the # in URL: Page won't move at all. OR moves to wrong place. Click button (#) to anchor link on same page: Only works for tab open on first page load. Otherwise nothing happens. Open anchor link in new tab via button(#): Works every time (all first load). Thanks so much!

<section class="coaching-tab-button-group"> <div class="tabs"> <nav class="tab-nav"> <ul class="tabs-ul"> <li id="coaching-tab-executive"><a class="tab-btn" href="#tab1" ><span>Executive Coaching</span></a></li> <li id="coaching-tab-parent"><a class="tab-btn" href="#tab2"><span>Parent Coaching</span></a></li> <li id="coaching-tab-relationship"><a class="tab-btn" href="#tab3"><span>Relationship Coaching</span></a></li> <li id="coaching-tab-nutrition"><a class="tab-btn" href="#tab4"><span>Nutrition Coaching</span></a></li> </ul> </nav> </div><!-- /tabs --> </section> <script> $(function () { $("section:nth-child(4) section:nth-child(5) section:nth-child(6) section:nth-child(7)").hide().first().show(); $(".tab-nav li:first").addClass("active"); $(".tab-nav a").on('click', function (e) { e.preventDefault(); $(this).closest('li').addClass("active").siblings().removeClass("active"); $($(this).attr('href')).show().siblings('section:nth-child(4) section:nth-child(5) section:nth-child(6) section:nth-child(7)').hide(); }); var hash = $.trim( window.location.hash ); if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click'); }); $(function () { let tab1 = 'section:nth-child(4)'; let tab2 = 'section:nth-child(5)'; let tab3 = 'section:nth-child(6)'; let tab4 = 'section:nth-child(7)'; let tab1Button = '#coaching-tab-executive'; let tab2Button = '#coaching-tab-parent'; let tab3Button = '#coaching-tab-relationship'; let tab4Button = '#coaching-tab-nutrition'; /*Initiate the Tabs*/ $(tab2).add(tab3).add(tab4).addClass('tab-section-hide'); $(tab1).addClass('tab-section-show'); $(tab1Button).addClass('active'); /*Add Actions to Each Button*/ $(tab1Button).click(function(){ $(tab1).addClass('tab-section-show').removeClass('tab-section-hide'); $(tab2).add(tab3).add(tab4).addClass('tab-section-hide').removeClass('tab-section-show'); $(tab1Button).addClass('active'); $(tab2Button).add(tab3Button).add(tab4Button).removeClass('active'); // window.Squarespace.initializeLayoutBlocks(Y); }); $(tab2Button).click(function(){ $(tab2).addClass('tab-section-show').removeClass('tab-section-hide'); $(tab1).add(tab3).add(tab4).addClass('tab-section-hide').removeClass('tab-section-show'); $(tab2Button).addClass('active'); $(tab1Button).add(tab3Button).add(tab4Button).removeClass('active'); // window.Squarespace.initializeLayoutBlocks(Y); }); $(tab3Button).click(function(){ $(tab3).addClass('tab-section-show').removeClass('tab-section-hide'); $(tab2).add(tab1).add(tab4).addClass('tab-section-hide').removeClass('tab-section-show'); $(tab3Button).addClass('active'); $(tab1Button).add(tab2Button).add(tab4Button).removeClass('active'); //window.Squarespace.initializeLayoutBlocks(Y); }); $(tab4Button).click(function(){ $(tab4).addClass('tab-section-show').removeClass('tab-section-hide'); $(tab2).add(tab1).add(tab3).addClass('tab-section-hide').removeClass('tab-section-show'); $(tab4Button).addClass('active'); $(tab1Button).add(tab2Button).add(tab3Button).removeClass('active'); // window.Squarespace.initializeLayoutBlocks(Y); }); }); </script> @tuanphan your accordians look great! Here is the code I'm currently using for tabs + anchors on this page: https://beehyve.squarespace.com/services/coaching#tab3 password: abc It's working but not reliably – it will open any tab on first load, but on second load with different # the page won't move to new tab. Not sure how to fix. Credit: Created the tabs ages ago but it was primarily based off Will Myers tutorials. For anchor link code I trialled snippets from codepen, stackoverflow, and cssplay.co.uk.

@paul2009 thanks for the suggestion, that's exactly the kind of thing I want! Unfortunately it only seems to work when the tab buttons, targets, and content are all in the same section, not in multiple sections like Squarespace. Is there anyway around this? Created both examples here: https://codepen.io/melaniejaane/pen/vYbBqrN

@RebeccaRichard did you figure this out? I'm trying to achieve the same thing but nothing I try is working. 😕

Hey @paul2009 does this mean a website would need custom code written for each anchor link/ tab instance or is there a way to create a universal system? I have 4 tabs on the below page, each with a custom ID I thought could be used as an anchor link. Website example: https://beehyve.squarespace.com/adhd-support I'm trying to learn JS, do you think it would be possible to create something like this: On load check url if url contains # get name after # (variable) Find ID on page that matches (variable) Trigger click action And that would open selected tab. Thanks!

@tuanphan would you know how to achieve this? Thanks! 🙂

Thanks for trying but unfortunately this video does not solve the issue. I have anchor links set up on sections inside a "tab" structure. But the links won't go to / open the correct tab.

I want to create direct links for each tab but I can't seem to get them to flick to the right section. Does anyone know how I can achieve this? Tab ID's: #support-tab-team #support-tab-providers #support-tab-practices #support-tab-services Site: https://beehyve.squarespace.com/adhd-support Thank you 🙂