Collapsible Row Element

[IronWisdom]

Is there a way to adjust the 'collapsible row' element so that the first of the collapsible rows is open when the product page is clicked on? So you don't have to click on it to open it, the top collapsible row just opens automatically? Using the Origin theme. 

[Mehran_Ali]

Hi @IronWisdom 

Can you please share you Store URL and Password if it password protected 

[Mehran_Ali · Accepted solution]

Hi @IronWisdom 

Hi 
You can use this javascript 
Just Follow these steps:

1. Go to online store -> Theme 
2. select three dots and choose code edit
3. Search for a theme. liquid file
4. in that field find this HTML tag 

</body>​

• above that tag add this Code as it is

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
    // Select the first <details> child of .product__accordion
    const firstDetail = jQuery('.product__accordion details:first');
    
    if (firstDetail.length) {
        // Add the 'open' attribute to the first <details> element
        firstDetail.attr('open', '');

        // Add the 'aria-expanded' attribute to the <summary> inside the first <details>
        firstDetail.find('summary').attr('aria-expanded', 'true');
    }
});
</script>

[IronWisdom]

I tired the code but it didnt work. I also couldn't locate the </body> in the theme.liquid code after searching for it, is there somewhere else i can place it? I just threw it at the very end of the code right before the '</style>' at the end of the code. 

[Mehran_Ali]

Okay in that case can you please share the collaboration code so I can check that and add that code 

[jseb23]

Thank you so much! Save me lot of time!