Jump to content

Open Accordion Block Using ID In Link

Recommended Posts

Posted (edited)

EDIT: See my later reply for an optimized version of this code.

I have seen a few questions about the possibility of using a link to open an accordion item automatically. I did a little experimenting myself, as I needed the same functionality. I've adopted this piece of code into the header of the page that has the accordion. In my case, I only have one accordion item I need to open so I used the Firefox developer tool to grab the id of the item, then reference it both in my javascript block and the link I'm opening:

E.g. My accordion id is called #button-block-yui_3_17_2_1_1717881226444_11132-1

In my case, the link on the calling page is going to be https://poochkingdom.com/faq#button-block-yui_3_17_2_1_1717881226444_11132-1, and the FAQ page opens with the accordion item open.

<!-- Put this in your page header, not the site header -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	<!-- If a location hash is passed to the window, and it's the one I'm looking for -->
	if (window.location.hash && window.location.hash === '#button-block-yui_3_17_2_1_1717881226444_11132-1'){
        <!-- Trigger the click event for this item so it opens on page load -->
		$(function(){
			$("#button-block-yui_3_17_2_1_1717881226444_11132-1").click();
		});
	}
});
</script>

You may need to customize it if you need to open more than one block by id, but hopefully this gives you the gist of how to make this work.

Let me know if you have any optimizations to this code that you can suggest, as I'm new to jScript.

Edited by PoochKingdom
I provided an optimized javascipt block in a later reply.
Link to comment
9 hours ago, PoochKingdom said:

I have seen a few questions about the possibility of using a link to open an accordion item automatically. I did a little experimenting myself, as I needed the same functionality. I've adopted this piece of code into the header of the page that has the accordion. In my case, I only have one accordion item I need to open so I used the Firefox developer tool to grab the id of the item, then reference it both in my javascript block and the link I'm opening:

E.g. My accordion id is called #button-block-yui_3_17_2_1_1717881226444_11132-1

In my case, the link on the calling page is going to be https://poochkingdom.com/faq#button-block-yui_3_17_2_1_1717881226444_11132-1, and the FAQ page opens with the accordion item open.

<!-- Put this in your page header, not the site header -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	<!-- If a location hash is passed to the window, and it's the one I'm looking for -->
	if (window.location.hash && window.location.hash === '#button-block-yui_3_17_2_1_1717881226444_11132-1'){
        <!-- Trigger the click event for this item so it opens on page load -->
		$(function(){
			$("#button-block-yui_3_17_2_1_1717881226444_11132-1").click();
		});
	}
});
</script>

You may need to customize it if you need to open more than one block by id, but hopefully this gives you the gist of how to make this work.

Let me know if you have any optimizations to this code that you can suggest, as I'm new to jScript.

Another approach we can try is adding the following changes on the DOM of accordion block:

- Adding the attribute [data-is-open = true] for .the class: accordion-items-container

- Add the class 'accordion-item__dropdown--open' for the class: accordion-item__dropdown

With this approach, we can open many items in your accordion at the same time, instead of applying only one item with your above code.

Hope that it is useful for you

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

Thanks @Beyondspace 

The point of my solution was a specific scenario where I have a link on page X with a hash reference to an accordion on page Y, and I want the text to open for that particular item when I click the link on page X.

I'm sure that there's an optimization that can be made where you can index all the accordion items on page load, then use the window.location.hash to click the specific item.

Link to comment

Below is the optimized code. I decided to take a look at what I wrote and tested a couple of scenarios.

The accordion id syntax used by Squarespace for my pages is "button-block-yui-<some id>-0" for the first item, "button-block-yui-<some id>-1" for the second, etc.

If you want to create a link to open a specific accordion item, you'll use:
https://yoursite.com/page#<button-block-yui-dropdownNumber>, where the value of dropdownNumber is 0, 1, 2, 3, ..., depending on which item in the list you want to open.

Here's the optimized code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	<!-- Save the window location hash passed to this page -->
	var loc = window.location.hash;
	<!-- If a hash exists, and there's a matching element in the page -->
	if (loc.length && $(loc).length){
		<!-- Execute the click event on the matching element -->
		$(loc).click();
	}
});
</script>
Edited by PoochKingdom
Typos
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.