celmir Posted February 14, 2021 Share Posted February 14, 2021 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 🙂 Link to comment
tuanphan Posted February 15, 2021 Share Posted February 15, 2021 Try edit Additional Info > Add a Code Block > Paste above code. You can also use this plugin to add Accordion, easy to install/customize Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
celmir Posted February 15, 2021 Author Share Posted February 15, 2021 @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. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment