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

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

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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!

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 0
Guest

@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

Share this post


Link to post
  • 0
Guest

You're an absolute hero. Thank you so much for your help!

Share this post


Link to post
  • 0
Guest

@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.

Share this post


Link to post
  • 0

Ah yes.. ..I forgot it because I have the jQuery script reference in the sitewide header.


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

Share this post


Link to post
  • 0

I like the Markdown approach but how do I insert an image as the body of the expandable portion instead of just text?

Edited by n00bie

Share this post


Link to post
  • 0

I have a question for @Bernard West : As part of the answer that comes down when I click on the question, I would like an image to appear that I have save on my computer. Is it possible to do that? How exactly would I code that in?Thank you!

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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?

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 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

Share this post


Link to post
  • 0

@silvabokis thank you for posting this, unfortunately it is not working for me. I keep getting the markdown looking like this, what am i doing wrong?,@silvabokis

screen-shot-2016-03-15-at-31701-pm.png.2424dcd8c89d08ca56fea1d9eefc27b5.png

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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

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...