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

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


mford

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
Link to comment

Recommended Posts

  • 0

It's a common interaction, but you're right - it might need tweaking to make it more obvious.

It could be improved by

  • adding clear microcopy around the piece 'Select a FAQ for more info..'
  • styling the open/close hint (should probably be more overt than my '+' sign)
  • styling the H3 to give it more of an accordion look
Edited by silvabokis

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Link to comment
  • 0

It's a common interaction, but you're right - it might need tweaking to make it more obvious.

It could be improved by

  • adding clear microcopy around the piece 'Select a FAQ for more info..'
  • styling the open/close hint (should probably be more overt than my '+' sign)
  • styling the H3 to give it more of an accordion look
Edited by silvabokis

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Link to comment
  • 0

It's a common interaction, but you're right - it might need tweaking to make it more obvious.

It could be improved by

  • adding clear microcopy around the piece 'Select a FAQ for more info..'
  • styling the open/close hint (should probably be more overt than my '+' sign)
  • styling the H3 to give it more of an accordion look
  • amending the script so that the first item is open to begin with, to give the user a hint that content is behind the other headings too.
Edited by silvabokis

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Link to comment
  • 0

It is only for certain types of content, and it needs to be obvious what it does. For long copy which is only going to interest certain visitors, show/hide (with an excerpt finishing mid-sentence and an invitation to click to see more) may help – reader gets an overview with the option of more if interested and remains on the page. If they choose to read they are probably less likely to get bored and leave, missing that key fact further down. Also good for Q&A. I hope I have that right :) @silvabokis is the ux specialist!

Link to comment
  • 0

I'm trying to implement a two-layer hideshow but am having trouble getting the code injection to cooperate.I have my primary hideshow categories in h2 and the sub hideshows within that in h3. I tried telling the h3 to open/close until it reaches another h3 OR an h2, but I am not very familiar with jQuery and have consequently lost myself in the code. Any advice on how to do a two-layer hideshow would be much appreciated.

Link to comment
  • 0

@silvabokis

Thanks your edited markdown, it was incredibly helpful for me. Tonight is the first night I've tried to write any sort of code at all so forgive me. May I be so rude as to ask for a little further help..

I managed to work out that changing the H1/H2 stuff relates to whether my text is formatted as headings, (GO ME) and i got your script working for H1 in no time (Thankyou)

I was just wondering if its possible to have information within some or one of the answers which can also be expanded?

I tried to edit your page injection to do this, but i totally messed it up (To be honest it was a massive stab in the dark)

essentially i'm using multiple expandable H1 questions which expand to show answers..

the last H1 question expands to show an answer but i'm looking to have 3 more expansions within this answer. (if that makes sense) ideally I want them to be H1 also, but it wouldnt matter if they were either H1 or H2 . i'll just be super glad that i can have expanding text within expanding text.

I did have an attempt at editing your code, to see if i could edit the "until" parameters to stop at the next H2 instead and then have the second expansions be H2 headings, but like i said.. I totally fluffed this up and i have no knowledge in this area what-so-ever.

Thank you in advance if your able to shed any light.regards, kaine

Link to comment
  • 0

@silvabokis

It only took me about 60 seconds to fix, But i noticed your code was missing this bit from the from, it didn't work for me till i added this part back on. Just in-case this is useful for anybody else reading.. this piece of code needs to be added to the start of the code injection.

Link to comment
  • 0

@Bernard West : I tried to copy and paste all of the script for questions 1-3 and continue with questions 4-6, but the expand and collapse function is only working for the first three questions. I tried looking at the script that I put into the footer but I can't see any pattern in it.

Can you help? Please?

Edited by mbmorandi
Link to comment
  • 0

@Bernard West: Do you know how to get the image to change when the answer is open vs when it is collapsed? I tried to get this to happen with a script, but it only works for my first question - if I click on subsequent questions the first image changes but not the one clicked on. Site is www.lyonsfarmette.com/faq. Again, that first quesiton works but the others don't. I'm assuming this is an id problem?

Link to comment
  • 0

Yeah it will be. I'll try and get back to this later to have a look at it. If I don't, it might be a week or so before I can get to it. Got to travel to a funeral on the other side of the country leaving tomorrow.

Off the top of my head, what you'd need to do is add some code inside the if/else (state.collapsed) block, to change the image to the new/correct one for each branch of that if/else block. To change the image you'll need to get the element with code and change it's 'scr' attribute.

Link to comment
  • 0

@Bernard-West Thank you for providing this code! It has been incredibly helpful. Can you please recommend how to update the arrow image. You mention in your post that we should update to our own image, but I'm not sure how to do that.

Thank you for your help.

Link to comment
  • 0

I’m using the Markdown Block/jQuery method very kindly offered by silvabokis for a collapsible/expandable FAQ.

Has anyone tried making a version of this with more obviously clickable symbols instead of the plus signs at the beginning of each line? Maybe some sort of arrow icon, to show that it can be expanded?

It would be extra nice if that icon changed when clicked too (for example a plus sign button icon changing to a minus sign button, or a down arrow changing to and up arrow to show that it can be folded back up).

Any ideas?

Edited by solongsekhu
Link to comment
  • 0

@Bernard West - thanks I used your html code solution below and now have a FAQs page with zero html/coding knowledge :) Just a couple of questions - 1. I removed the first h2 reference because I didn't want the Q in Heading format. I'd actually just like it in Bold if that's possible? 2. I'd like to create some links within the Answer text to other pages - either external or my own - possible? I tried the markdown solution from @silvabokis, just couldn't get it to work - shame because the html method for 93 FAQs took FOREVER!thanks both :) any additional help appreciated!

Edited by crayongirl
Initial Revision
Link to comment
  • 0

Hey guys, I just lost hope, trying to resolve this - the list expands on page load and I have to click elements to collapse it. Any ideas what the problem might be? Thanks @Bernard West

Edited by karolism
Initial Revision
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...