Collapsible product description

[Easthillsupply]

Running supply theme, I want my lengthy product descriptions on product page to be shortened with a "read full description" link that will expand the entire thing.. mostly because it is pushing my recommended products and reviews down.

Im ok with html and working in template files but not so much js.. I havent done much of that..

Anyone have any instructions to do this? I try to avoid apps whenever possible for speed.

[Reincarnated · Accepted solution]

Hey there.

This may need to be tweaked to do what you want exactly, but this is a Pure HTML/CSS Accordion.  I would maybe test it out on a Dummy Product hidden from the public first, and if it works then look into hard coding it into your theme to effect all products.

https://www.sean-orfila.com/blog/shopify/how-to-create-an-faq-accordion-in-shopifys-page-editor/

if you are looking to hire someone to set it up for you, feel free to reach out to me 🙂  digital.reincarnation@gmail.com
An Example of some of my code in use can be found at https://demo.ecomdev.ca/

[annikareed]

Thanks so much! Just what I needed too.

It worked so even happier! 

[kirag]

Hi @Reincarnated,

This worked very well, thank you. However, if I am scrolled far down the page, particularly on mobile, and I click to expand the collapsible, it expands so that I am left looking at the bottom of the content in the collapsible (so I have to scroll through all the content to get to the top and start reading).

This is a problem that happens with every type of collapsible/accordion I have tried - Bootstrap, creating my own, the solution you sent.

Do you have any idea why this is happening and how I could fix it?

Thank you! 🙂