Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to do accordion/toggle for FAQs, etc.?


dizzyd

Question

Recommended Posts

  • 0
12 hours ago, bluepeach said:

This worked great! But how do I remove the padding on mobile? It looks like the attached pic now. 

Tried to add the following but didn't change anything:

@media screen and (max-width:767px) {
  #block-yui_3_17_2_1_1633265646658_24065 {
   padding-left: 0;
    padding-right: 0;
}
  }

Screenshot 2021-10-04 at 11.11.03 AM.png

For display purposes I gave the accordion a fairly narrow width. Try replacing the first line of CSS with this. 
It will expand to the width of the container, aka be responsive.
 

.accordion{width:100%; margin:2em auto;}

 

Link to comment
  • 0
10 hours ago, DV2 said:

For display purposes I gave the accordion a fairly narrow width. Try replacing the first line of CSS with this. 
It will expand to the width of the container, aka be responsive.

Perfect! Thank you so much. 

Link to comment
  • 0
4 hours ago, DavidCliff said:

This works great for me on desktop, but when I click the "question" on mobile it skips to the top of the page. Any ideas? I presume it's something to do with: href="#"

Can you share your site with protected password for easier checking?

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
On 1/15/2017 at 5:18 AM, dizzyd said:

I discovered that Squarespace doesn't have any accordion/toggle styling that can be used for FAQs, etc. I was directed to come here and ask how to do it. I was hoping to have something that looks like this (see attached image)./storage/temp/4657-zzz305-20170114-1412.jpg

zzz305-20170114-1412.jpg.58137a4c03efd3c228befbdb1efddd98.jpg

Squarespace updated an Accordion Block. Now you can add it without using custom code

accordion1.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...