Changing appearance order on PDP, adding accordions to PD

Hey there,

thanks for helping me out! I saw many people had this issue, but though reading the comments it did not become clear to me which solutions worked. -for me nothing worked-

I am trying to achieve the following:

- Creating accordions in the product description (similar to here: https://www.net-a-porter.com/en-us/shop/product/philosophy-di-lorenzo-serafini/double-breasted-houndstooth-cotton-blazer/1299457) --> they should come right after the product description, before size selection (it is important though that this also looks proper on mobile).

- These accordions should have toggling +/- 

I was so far able to add the following code to the shop setting --> Advanced -->Page Header Code Injection and it worked where as I see the accordions unter the main product details (price size description etc.) but also the toggling does not work yet.

---------------------------------------------------------

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

$(document).ready(function() {

$('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor', 'pointer');

$('.markdown-block .sqs-block-content h3').nextUntil('h3').slideToggle();

$('.markdown-block .sqs-block-content h3').click(function() {

if ($(this).nextUntil('h3').is(':hidden')) {

$('.markdown-block .sqs-block-content h3').nextUntil('h3').slideUp();

$(".markdown-block .sqs-block-content h3").removeClass('ui-open');

$(".markdown-block .sqs-block-content h3").addClass('ui-closed');

$(this).nextUntil('h3').slideDown();

$(this).toggleClass('ui-closed ui-open');}

else

{

$(this).nextUntil('h3').slideUp()

$(this).toggleClass('ui-closed ui-open');}

});

});

</script>

----------------------------------------------------------

I am not sure if I am entering the code in the right spot, or if this needs to go under Settings --> Advanced --> Code Injection Header/Footer. Also I am not sure how to add the CSS (for the order I assume?) to my existing CSS (which place / what code etc.).

It would mean the world to me if we could find a solution for this!

Thanks all for looking into it and helping a beginner like me 🙂

Try edit Additional Info > Add a Code Block > Paste above code.

You can also use this plugin to add Accordion, easy to install/customize

@tuanphanThanks for responding. I believe though when using a code block, you can only have one markdown block, as otherwise it does not work for multiple blocks. I want multiple dropdown though. I do not want to use any plugins if possible, so I would like to focus on the code 🙂 Again, thank you.