How to create “Read More” dropdowns inside Auto Layouts in 7.1

[@beatrizecaraballo]

UPDATE AUG 2024: the code at the end of the post was modified to work with the latest Squarespace change that disables markdown code inside Auto Layout fields. Make sure to use the new version and setup: www.beatrizcaraballo.com/blog/dropdown-auto-layout-squarespace

[@Daniel-digitalantics.network]

I came here for exactly this reason... thank you for the update.

[@hollybaerSF]

No way! This is so cool! I can't wait to use this! THANKS B!! 😀😀

[@beatrizecaraballo]

Oh yay! I'm so glad to hear you liked this one! You're most welcome 😊

[@oneninedesign]

I love this so much! I was using anchor links to link to the long bio on another page and it's hard to teach clients how to maintain that. Thanks so much!

[@beatrizecaraballo]

So glad to hear you found this alternative helpful, Andrea! It's definitely a great way to make things easier for clients to update. It's my pleasure! ☺

[@danielhahn655]

This was brilliant! Thank you!

[@beatrizecaraballo]

I appreciate that! You're most welcome ☺

[@ThamarCampbell]

This is great! What snippet might be required to create the same effect with a carousel?

[@beatrizecaraballo]

Thank you! And you can use the same code with the Carousel Auto Layout 🙌

[@ThamarCampbell]

@@beatrizecaraballo Thank You!

[@jenayahawreluik5695]

Do you have a video on how to hide and reveal whole sections with a button?

[@beatrizecaraballo]

I don't but Will does! kzbin.info/www/bejne/apDJp3huorRkn8U&ab_channel=WillMyers Hope that helps!

[@sanderpaljak876]

Thank you! I created a portfolio page with carousels and applied this solution. It works great, but I would like to add some functionality. Either collapse the read more section when the next slide comes up, or open the next read more automatically. Otherwise the previous read more paragraph is opened in the background creating a lot of white space, while the current dropdown is still closed. Can you point me in the right direction ?

[@beatrizecaraballo]

You're most welcome! 🙌 I'm glad to hear that worked out for you. To be able to implement that kind of additional functionality you'll need to modify the code of the dropdown so that it "reacts" based on the visible or focused slide inside the carousel. That's something that falls outside of the scope of the tutorial so I'm afraid I can't provide support for that here. But, if that's something that you're interested in having on your site, don't hesitate to reach out: beatrizcaraballo.com/contact

[@MickeyOwenTM]

Thanks. Is there s way to have the link text to disappear? like if it said "read more" we'd want that to disappear and ideally not leave a gap in the paragraph of text.

[@beatrizecaraballo]

You're welcome! It depends on how smooth you want the transition to be and how exactly you want the text to go away (fade/slide/etc), but you can achieve a basic text removal with pure CSS by including this in your code: .list-item-content__description h6.open-dropdown { height: 0; margin: 0; visibility: hidden; } Hope that helps!

[@atkarx]

Is they a way to have the text display to the right of the image?

[@beatrizecaraballo]

Yes, totally! You can use flexbox to make that happen. There's a snippet for that inside the Snippet Directory if you're interested: beatrizcaraballo.com/blog/side-by-side-thumbnail-content-auto-layout-simple-list-squarespace

[@KylaVilla-hd6sw]

For some reason i can't get this to work with the carousel. Any common mistakes that could be causing this? The menu simply won't retract or expand like it's supposed to.

[@beatrizecaraballo]

You may want to check that you have the jQuery library inside your Code Injection section. The script usually says something like code.jquery or ajax.googleapis. If you don't see that, go ahead and grab the one inside the blog post where it says "JQUERY LIBRARY (IF NEEDED)" Add it to your Header Code Injection section and the code should work! If it doesn't, feel free to email me an email to your page + trial password (if the site isn't live) so I can take a closer look at the problem.

[@SamBoyle-r9u]

Hi Beatriz, it seems like the markdown feature inside the auto lists description isn't working anymore. I tried it on two different website. It worked a while back but not today.

[@beatrizecaraballo]

Hey Sam! I know! The update seems to have happened this week, it's such a bummer. I'll be adding an alternative setup route to the blog post shortly 🙌

[@SamBoyle-r9u]

@@beatrizecaraballo thanks!!

[@lonesprucecreative]

Can you move the "+" to appear to the left of the H6 text?

[@beatrizecaraballo]

Absolutely! If you change the pseudo-element from ::after to ::before in this line of the code... .list-item-content__description h6::after { } ...you'll have the symbol on the left side of the text! You can also simply write it inside the description field, as part of the h6 text, and skip that code snippet instead. Hope this helps!

[@GeekFilter]

Haven't used square space in 11 years and I've noticed it's more stable but also for more irritating. Following your tutorial I am trying to add the pound signs to get the H6. It does nothing. I have a piece of text that has 6 pound signs followed by more. So this: ###### read more. Any clue what I might be doing wrong? And of course, like every project, it was due yesterday!

[@beatrizecaraballo]

Interesting issue! If you're copy/pasting the text with the space and the pound signs that usually doesn't work. Try pasting in the ######read more text and THEN adding the space inside the corresponding field to bring up the markdown style! Another thing to check for is that you're adding the h6 to the Description field of the slides. The title field doesn't accept any markup. Hope that helps!

[@Daniel-digitalantics.network]

In a similar vein, I would like to style some text inside the Description field of an item in a list section. Now that they've removed markdown functionality, it seems that bold, italic, and underline are the only styling features available to us, which also limits CSS targeting. Do you have any suggestions on how to add further styling? I would also like to add a strikethrough to a specific word, and I'm clueless as to how to accomplish this. Any suggestions? Thanks for everything.