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

How do I create hide/show text on a page, like you see with FAQs?

Question

Specifically, I'm using Aviator and on my services page I have a lot of entries that are service name with explanations underneath. I'd like the explanations to be hidden initially so visitors only see the list of services. Then they would have the option to expand the explanations under the services they want to read more about.

For example

Service Name (visitor would click name to open text underneath)[explanatory text here would remain hidden until user clicks service name, then expand to be read]

Is there any way to do this?

Edited by Aisfofo
retag

Share this post


Link to post

Recommended Posts

  • 0

I changed the additional question ID's and I still don't get an expandable divs on the new questions. The questions are there but on-click does nothing -

.

If I cancel my session in less then 24hours, am I charged a fee?

Here is answer 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Share this post


Link to post
  • 0

We can even hide images and text like FAQ

Please check this video demonstration of how to insert accordion in the Squarespace website using markdown block .

The markdown block can be used for inserting contents


I am a Squarespace developer . I have a channel in you tube https://www.youtube.com/channel/UCfHTuXFfsL6eFZynUfj3cdg Contact Me for more details : nidhidhiman004@gmail.com My website: http://galacticsquare.in/

Share this post


Link to post
  • 0

There are many solutions out there (some good and some bad), but you'll need to do some Googling to find them. Basically, you'll need to Have some JavaScript run under the code injection section to manipulate some HTML within a code block. This feature is typically called a drop-down accordion.

Devon Stank @ Devonstank.com (Squarespace Tips & Tricks)

Edited by Vexsoft
Initial Revision

Share this post


Link to post
  • 0

Hi guys,

Anyway to create a BOX style dropdown of content?Like this?

Anyone have ingenious coding for this beautiful clean style?

HUGE thanks

screen-shot-2016-12-13-at-35831-am.png.848a4e7070337620cbec00f942723ce2.png

Share this post


Link to post
  • 0

Hi,This is super helpful - but when I've created something similar, my questions are clickable as they're meant to, and the answers do show/hide as intended. However, the answers are already shown when the page loads, which counters the whole intent to have the short FAQ page (area-wise), and only expand those answers which are clicked. Help? I'd like for the page to load with questions only to begin with.

Share this post


Link to post
  • 0

Hi Bernard,

Thank you for this solution, I have implemented into my site, but I just wondered whether there is a way to style it so that the answers are revealed more smoothly? At the moment, the text is appearing instantly. Thanks in advance!

Share this post


Link to post
  • 0

Thank you for sharing this code. It worked for me.

However, on under an index it only works on one page. Is it possible to have it on each page in the index?

Share this post


Link to post
  • 0

Hi, I need some help on customization and styling. May you please explain the function of each line of the code? I am trying to customize it a bit so that I don't have to call the show/hide function by "h2" -- the goal is to adjust the spacing before and after as well as the font type/size/color of the expanded item (or the clicked item).

If you have any other thoughts, please let me know. Thank you so much in advance!

Share this post


Link to post
  • 0

This did not work for me using the Brine template. I tried to use the Page Code injection, but it did not work. I used the site code injection it worked but since I use a lot of markdown all of my H2s in markdown boxes turned into dropdowns. So close! But I could not figure out how to make it work. :/

Has anyone come across this? Or a way to fix it?

Share this post


Link to post
  • 0

Hi all, thanks @Bernard West this works great. However, I have the same question as @aakritip the answers are already shown when the page loads, what should I do to get the questions only at the beggining and the answers only when clicked? Many thanks for your help.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...