Jump to content

Prevent "slide animation" on FAQ accordion page?

By shonna, in Customize with code

Go to solution Solved by tuanphan,

Recommended Posts

shonna Level 2

shonna

Posted
Posted (edited)

HELLO! I use the "slide" animation for my site, which I like and works well on most pages. Unfortunately, on my FAQ page, no content shows on the page (except the headline) until a user scrolls down and then back up again.

Is there a way to prevent the "slide animation" from occurring on just this one page? I would like my FAQ accordion to appear immediately upon viewing the page without a viewer having to scroll down. 

Edited by shonna
Included URL
  • Replies 7
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan
tuanphan

Hi, Can you share link to FAQ page?

tuanphan
tuanphan

Add to Design > Custom CSS   body#collection-6177345bdb1dd03a0426bfb1 article .preSlide { opacity: 1 !important; transform: unset !important; }  

tuanphan
tuanphan

That code target FAQs page id so it will run on FAQs page only. You try clear browser cache & check again  

Posted Images

shonna Level 2

shonna

Posted
  • Author
Posted (edited)

Thank you! Ok, I did put the code in that location, and it works! But is that going to affect ALL of my pages? Taking out the slide effect? If not, can you help me understand why? 

Edited by shonna
  • 7 months later...
tuanphan Level 18

tuanphan

Posted
Posted
On 12/28/2023 at 12:47 PM, shonna said:

Hello! Me again. I have another page that I'd like to apply this style to: https://dndadventureclub.com/resources/dnd-tips-tricks

The code you gave before has worked great for my FAQ page, but now I want to also apply that to this new page. I can't figure out where to find the Page ID as you reference above to include in the code. 

Can you help? 

To find Page ID, follow these

Right click on anywhere on page > Inspect

image.png.52d0713b2cf20534c0fb906aac66d936.png

Scroll down > Find 

<body id=

image.png.8f43dae2b0de83be481f1f2b2fa19de7.png

In this example, you will see 

<body id="collection-58d01506e3df284bada16b9f" class="..."

and

collection-58d01506e3df284bada16b9f is ID

when use ID, you need to add # symbol before it, it should be 

#collection-58d01506e3df284bada16b9f

or 

body#collection-58d01506e3df284bada16b9f

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources