Open Accordion Block Using ID In Link

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.

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

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.