How to auto open product description as default in accordion tab

[surfingcinv]

Hello,

I found this article and followed the code, but its not working on my store. What am I doing wrong?

https://community.shopify.com/c/shopify-discussions/set-bar-as-open-in-product-description/m-p/19063...

<script>
$(document).ready(function(){
$('.product__accordion').each(function(el,item){
if (el === 0){
$(this).find('details').attr('open', '');
$(this).find('summary').attr('aria-expanded','true');
}
})
})
</script>

This is the store URL

https://www.iamgreenminded.com/products/bakuchiol-serum-retinol-alternative-phyto-r5

[Dan-From-Ryviu]

Hi @surfingcinv 

You can try changing the code to this, but I guess it will open all tabs by default. 

<script>
document.addEventListener("DOMContentLoaded", function() {
    var accordions = document.querySelectorAll('.product__accordion');
    accordions.forEach(function(item, index) {
        if (index === 0) {
            var details = item.querySelector('details');
            var summary = item.querySelector('summary');
            if (details) {
                details.setAttribute('open', '');
            }
            if (summary) {
                summary.setAttribute('aria-expanded', 'true');
            }
        }
    });
});
</script>

[surfingcinv]

Thanks. But I need only the product description section auto opened

[surfingcinv · Accepted solution]

Solution was adding  " open" to the code in the following screenshot 

[PaulMartin]

Hey @surfingcinv, 

I am assuming you are using Dawn, based on your previous post. This comment will be a step-by-step guide in order to attain what you are looking for.

To start, go to your code editor. Head to Online Store > Themes > ... of the theme you want to edit > Edit code. 

Then search for the file named "main-product.liquid", ensure that you are in the Sections folder. Open that file

Then by using CTRL + F, look for this piece of code. It should be at the 900th line or somewhere close to that

"type": "collapsible_tab"

Next, I want you to add this piece of code here, just like the image after the code below. Then save the file.

{
"type": "checkbox",
"id": "custom_open_default",
"label": "Open by default",
"default": false
},

Now the setup is done. Next, we'll be adding more code in order to make that added setting work as it should.

In the same file, CTRL + F, and find this piece of code. It should be at the some 200s line.

when 'collapsible_tab'

Next, I want you to add this piece of code here, just like the image below this code:

{% if block.settings.custom_open_default %} open {% endif %}

Then click save. That should be all the code additions needed.

Now head to your theme editor and click on the description block. And you should see the new setting we added for the setup. If you mark it checked and save your theme, that collapsible row will be opened by default.

Here's a demo of that working flawlessly. 
Product A – martin-dumpstore
Password: 1

If you got any questions, let me know. And if there are any unclear instructions, let me know and I will guide you in order to make this possible on your store.

[PaulMartin]

Oof, I thought it was the collapsible tab. Guess it was just the product description, my bad there. Good work on getting it sorted out @surfingcinv !

[deep_wrinkle]

Hi there, I am also looking to have the first accordion tab open by default on all my product pages. I am currently using Sahara as my theme. 

[PaulMartin]

Hey Deep,

Since Sahara is a paid theme, I don't know the code inside of it, so I can't give you instructions to follow. Sorry Deep.

If, however, you're open to the idea of giving me access via collab (Shopify Help Center | Collaborator accounts), I can very certainly take care of it for you. I usually do this as a paid service but, for this time, I can do it for free. Just let me know via my email below and I'll get back to you within 24 hours.

[HansØstergaard]

Hello Paul.

I am trying to do the thing you are explaining, also in the theme dawn. But in step where i need to find this line of code: "type": "collapsible_tab", it isn't possible? Do you know why? You can see what i have done in the screenshot.

Hope you can help

Bets Regards

Hans Ø

[PaulMartin]

Hey Hans,

It looks like you have a different theme other than Dawn? Can you check, like the screenshot below?

[HansØstergaard]

Hey Paul

Thats right😅 I have the nitro theme. Is it possible to do the same thing, in that theme?

Best Regards

Hans Ø

[Dan-From-Ryviu]

Can you share your store link so we can check? 

[HansØstergaard]

Of course: https://plaineyewear.dk/ 

[PaulMartin]

Hi @HansØstergaard,

Was Dan able to help you with this?

[HansØstergaard]

Hi again!

I have unfortunately not received an answer yet. So at this point i haven't got the help i need.

[PaulMartin]

I see, hmm, I was assuming they were going to help that's why I didn't reply after a few days.

I'll handle the problem for you.

Could you send me an email through my contact email below? I wish I could give you instructions, but I can only do so if you're using Dawn. So, we'll need to move to a private conversation because I'll need to request access to your theme in order to make the changes.

Then, let me know once you've sent an email because sometimes my contact email bugs, and I won't receive any incoming email. 

Thanks Hans

[HansØstergaard]

Just send a message

[PaulMartin]

Thank you, Hans! Just replied to your email, check it out if you haven't yet.

[HansØstergaard]

Thanks. I have received it