How to add accordion functionality into product description ?!

@jpeter I seem to have some issues with the code and the product description txt not having the same position on mobile vs. laptop. 

I also can not manipulate the order with the css injection code:

.ProductItem-additional {
  order: 3;
} 

I injected it into the custom css, but it just does´nt react to it. 

I hope you are still around to help 🙂 - either way - your help was really great with the javascript which i added to the footer as suggested:

<script>

(function(){
  var accordion = document.querySelector('.ProductItem-additional');
  var description = document.querySelector('.ProductItem-details-excerpt');                    
  
  if(accordion && description) {
    // Remove accordion from current position.
    accordion.parentNode.removeChild(accordion);
    
    // Add accordion after the description.
    description.after(accordion);
  }
})()
</script>

4 hours ago, mynovastudio said:

seem to have some issues with the code and the product description txt not having the same position on mobile vs. laptop.

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

@creedon thank you for your reply - here is a link to a specific product where an accordion has been added: https://mynovastudio.dk/webshop/p/top-push-pin-snake-go?rq=loke

I have manually added a spacer under the accordion to create a bit of space between the add to cart and accordion, as well. But that must be fixable with som code too.

______ Random comment______

It´s a lot of work having to add the accordion manually to each product like this. It would be such a life hack, if one could add a pre-designed (editable) accordion to a product-section - just like to feature to add a ❤️-section elsewhere.