Skip to Questions

Guide FAQ - Your LibGuides v1 Questions. Answered!

Q

How do I create expandable text (click a link and text expands, click again and it's hidden)?

I would like to create an FAQ section where just the questions are listed as links, and once you click on each the answer will appear below the respective question. And if you click on the question again, the answer will be hidden. Is this possible?
Last Updated: Oct 16, 2013  |  81660 Views

Was this helpful? 58   18
A

Answer

You can do this with a little JavaScript magic... :)

Choose which method you'd like to use: Show/Hide My Text  |  Replace My Text With Other Text


The instructions will appear here once you select an option.

This FAQ is an example of the "Replace My Text With Other Text" option.

An example of the "Show/Hide My Text" option is in that section.

Answered by Anna BurkeBookmark and Share

Other Answers / Comments (66)

  1. I have tried working with this code within a table, but everytime I go back and edit the table again in the rich text editor it messes the expandable text code up. Is there any way around this?
    by Ayla on Jun 19, 2012.
  2. Hi Ayla! Once you’ve added the code in you cannot make any more changes using the Rich-Text Editor. This is a common limitation with all WYSIWYG-editors out there. Adding code to the plain-text editor will be overwritten if you use the Rich-Text. Basically, the Rich-Text Editor doesn’t know how to interpret that code so it deletes it, comments it out or messes it up. So your choices are to wait to the very end when all your content has been added and then add in the JavaScript code or edit all the text using the Plain Text Editor. Best, Talia
    by Talia Resendes on Jun 19, 2012.
  3. Aloha, and thanks for the script! Can I do something so the first answer is open by default? Thanks! -tara
    by Tara Severns on Jun 21, 2012.
  4. Sure! For either option, just make sure that the display option for whichever section you want to be open by default is set to display:block; instead of display:none;. For example: <div id="para1" style="display:block;"> Hope that helps! Anna :)
    by Anna Burke on Sep 17, 2012.
  5. This code will useful. Can it be tweaked some more?
    - Can the default for para1 be a down arrow?
    - How about changing the color of the arrows?
    Thanks.
    by Ethel on Sep 22, 2012.
  6. You can customize the graphics to suit your needs but you must store them on your own server (in case they are removed from our server) and change the image URL to point to the location on your server.
    You can change the right arrow to a down arrow by replacing "right" with "down" in the image file name.
    by Mark Andrea on Sep 24, 2012.
  7. This is great, thanks! Just a couple of questions about customising so that we can use this as a news feed / mini blog:

    - Can I make it so that only one expanded question shows at a time? e.g. When I click on Q1 it opens up, when I click on Q2 it opens up and Q1 closes.
    - Can I have it so that some of the answer shows under the question title before you expand it? And have a 'Read more' option to see the rest?
    - Can I edit the question font size and colour?

    Thanks!
    by A'Mhara on Oct 08, 2012.
  8. Hi A'Mahara -

    1. Yes, just use the "Click to Replace Display" instructions.

    2. Absolutely, just change the code a bit so you have the question, part of the answer, and make the "Read More" text the link (where in our examples it's the question).

    3. Of course! Just use a little CSS OR add the content first without any of the javascript / other code, change the style as you wish, then move to the Plain Text Editor and add the javascript / other style code as described in this FAQ.

    Hope this helps!
    Anna :)
    by Anna Burke on Oct 09, 2012.
  9. I cannot get the "Click to Replace Display" code to work. When I click, nothing happens. I am on IE 8, could that be the problem? Also tried in Google Chrome and did not seem to work.

    I got the "Click to Show/Hide" to work just fine but wanted to experiment with how the other functions as well.

    I copied/pasted code in exactly and made said changes to Question 1, etc. but nothing happens. Would anyone verify that the code is working, please.

    Thanks!
    by lverma on Nov 07, 2012.
  10. Hi Iverma -

    The issue was a missing parenthesis in the code (our fault!).

    I've updated the FAQ so that is clearer, and your box should be acting now as intended.

    To make things easier, I also moved the javascript for the "Click to Replace Display" option to your Admin Stuff > Look & Feel > Custom JS/CSS box so that you can easily use it anywhere in your guides without having to add it to each page.

    Thanks for your question! Let us know if you need anything else. :)

    Anna

    by Anna Burke on Nov 09, 2012.
  11. Hi! I have used the FAQ before to great advantage - thanks. I notice now a new option - "click to replace display." I don't know what that means. Can you provide a link to an example? Thanks. -Alicia
    by Alicia on Nov 10, 2012.
  12. Hey Alicia -

    This FAQ itself is the example of the "Click to Replace Display" option (as noted in the text when you first look at the FAQ). :)

    When you use the links at the top to display the instructions & code for using each option, the text below those links changes to display the appropriate information.

    Does that help?

    Anna :)
    by Anna Burke on Nov 10, 2012.
  13. I Love You! :) Worked like a charm!
    by JuicyQuake on Jan 03, 2013.
  14. This is great I have been trying to do this on my site for weeks only query how do i get rid of the little x box on left
    by paul t on Feb 21, 2013.
  15. Hi, Paul,
    I'm not seeing the x you're referring to - can you email a link to the page you're viewing to support@springshare.com?

    Thanks!
    -Cindi
    by Cindi Trainor on Feb 21, 2013.
  16. Please someone help me with this. i copied the code and it did worked, but my problem is how to add multiple clicks. i added more than one and each of the questions expand any answers on the page. i really want to be able to expand multiple answers but individually with different works. please can someone help.
    by renard on Feb 26, 2013.
  17. Hello Renard - Can you send us the URL of the guide in which you are trying to add the expandable text? Thanks. - Ken
    by Ken Liss on Feb 26, 2013.
  18. Hello!
    I think this is a great tool, and I just have one question: is it possible to have different clicked and unclicked pairs of images for different expandable menus in the same box? I can get it to work perfectly when I have only one expandable menu (and thus one pair of images), but adding a second causes trouble.

    Amedeo
    by Amedeo on Mar 20, 2013.
  19. Hi Amedeo,
    It works best with just one pair of images.
    Thanks - Zinthia
    by Zinthia Briceno on Mar 20, 2013.
  20. Which part(s) of the code should I replace with my image URL(s)?

    I think this is related to Paul's problem with the x on the left. I did the code as you instructed (changing only the items in bold). Then I opened the page in Internet Explorer and got an x instead of an image. So obviously the arrow image needs to come from somewhere.
    by Kristen on May 13, 2013.
  21. Hi Kristen - Can you send us the URL of the page where you have added the expandable text? Thanks. - Ken
    by Ken Liss on May 13, 2013.
  22. Hi Kristen -

    You should be all set. The code "YOUR OPEN IMAGE URL" and "YOUR CLOSED IMAGE URL" needed to be replaced by URLs for the images you wish to use. I inserted the URLs for the green arrows we use, but you can replace those with other images if you choose. I also amended the FAQ so that that step is made clear.

    Ken
    by Ken Liss on May 14, 2013.
  23. The closing ['] is missing from the Click to Replace code in the faq: should read [ "OpenDiv('div2')" ]
    right now it reads ["OpenDiv('div2)"].
    by Reba Curtiss on May 20, 2013.
  24. Thanks Reba!
    I've updated the FAQ!
    by Zinthia Briceno on May 20, 2013.
  25. Hi
    Is there I way I can use this template but not have an arrow picture at all? i.e. just having the question to click on? I have tried just deleting the lines of code where you insert the links to the arrows but this does not seem to work?
    Thanks
    Tom
    by tom on Jun 26, 2013.
  26. Hi, Tom!The piece of code you should remove is the part that actually calls the image, in the bottom part of the code. It begins with "img ..." Just remove that line, and there will be no image. :)Best, -Cindi
    by Cindi Trainor on Jun 26, 2013.
  27. Can you please check the script for an expandable text command on this guide http://campusguides.dtwd.wa.gov.au/content.php?pid=282264&sid=2323842
    The box titled "Database searching help"
    The Search strategies should be actioning expandable text but its not happening - can you please fix it for me?
    Thanks Carole
    by Carole Dean on Jun 27, 2013.
  28. Hi Carole,
    You were missing part of the code, which I inserted in the guide's CUSTOM JS/CSS CODE. There was also a part of the code missing in the box itself, so I fixed that too.
    You'll notice that now there are green arrow images, which are the ones we use in the sample you see in the FAQ. You can change them to a different set of images, if you'd like. Just replace the image urls (which are between the single quotes following the "img src=" portions, both in the box's code and in the CUSTOM JS/CSS code.
    I hope this helps!
    by Valentina Mayz on Jun 28, 2013.
  29. I created a box with the expandable text and listed RSS feeds (with Javascript) in each one. Everything was working perfectly until I went back today and added in a new topic and rss feed. Now none of the links will expand. I have checked and rechecked by code (I saved the original code) for comparison and can't figure out the problem. I also did it just from plain-text to make sure the rich-text formatting wasn't screwing it up. Any suggestions (http://libguides.lib.umanitoba.ca/aecontent.php?pid=471106)
    by Me-Linh on Jul 04, 2013.
  30. Hi Meh-Linh,
    I visited your guide and saw that most of the links in the "Recent Journal Articles" are functioning properly; is this the one that's not working for you anymore?

    I also noticed that you have a box on the right column, near this one, with similar code - titled "Test". There is a problem there: when I clicked on the items in that box, the items in the "Recent Journal Articles" would collapse and expand. If this is what you meant, the reason is that the code requires each link/div pair to be uniquely named (para1,para2,para3, etc.) You did this correctly in the center box, but the names are also being used in the right box.
    I went ahead and did some reorganizing of item names, so that the link/div pairs in the center box are uniquely named ''para1'' thru ''para9'', and in the right box they are names ''para1a'' thru ''para1h''.

    This ensures there will be no confusion between elements.
    Should you need to add more items to either box, or even add a third box to this page using the same functionality, just make sure to use names not already in use by the other items.

    I hope this helps!
    by Valentina Mayz on Jul 04, 2013.
  31. I used the show/hide code to create an expanding list. I do not want any images next to my list items though. What code do I remove so it is just an expanding list with no images?
    by lindsey on Jul 12, 2013.
  32. Hi Lindsey-
    You can do that but you will need to remove any reference to an image from the code. So delete the lines "i.src = 'YOUR OPEN IMAGE URL';
    } else {
    e.style.display="none"
    i.src = 'YOUR CLOSED IMAGE URL';
    }"
    and .

    Then users will just click on the para1 text and the toggle will happen.
    Best,
    Michelle
    by Michelle Lustig on Jul 12, 2013.
  33. Hi!
    I'm struggling to use open/closed arrow images with the "replace display" option. I also can't see an example anywhere to show it working. when i click "use replace/display" the example "check it out" piece isn't shown. That only gets shown for show/hide!

    I'm struggling to modify "replace display" code to hook in closed/open arrow images...
    by chris on Jul 28, 2013.
  34. I'm using the Click to Show/Hide method to list dates when I'm at a particular site with the month being the question and the dates being the answer.
    For the August 2013 item when the link is clicked the left-right arrow changes to a down arrow but for all the others it remains as a left-to right image.

    Any ideas why that might be?

    Thanks,
    by Jill on Jul 29, 2013.
  35. Hi Jill - Can you send a link to the page where you have this? It's probably a simple thing in the code, and we can take a look and get back to you. - Ken
    by Ken Liss on Jul 29, 2013.
  36. Hi Chris,
    This FAQ is actually an example of the "Click to Replace Display" option.
    When you click either of these 2 options that sit at the beginning of the answer:
    **Choose which method you'd like to use: Click to Show/Hide | Click to Replace Display**

    it replaces those three lines with the instructions. That's an example of "replace display."
    by Valentina Mayz on Jul 29, 2013.
  37. It seems like the inability to modify text afterword in the rich editor is problematic. That is fine if tight control is kept, but it seems like the idea behind LibGuides is to allow multiple users who don't understand code to create and modify content.

    Regardless, what I would really like to have is a way to expand and collapse the entire content area. Basically the default display of the box would be the header and border, and when you clicked the header, or something within the header, the content area would expand. This way, there wouldn't be any issue with using the rich text editor.

    Any chance of getting code for an expandable box?
    by Jason on Aug 15, 2013.
  38. Hi Jason, You make a good point. Unfortunately, that's one of the downsides of a WSYWYG editor and background code integration. I don't know if this will be made better with a new text editor we plan to change to in the near future, but I will definitely share your suggestion for a better option with our development team.
    by Valentina Mayz on Aug 15, 2013.
  39. Are the hidden/replaced text searchable when using the "Search this guide" box? I have had hit and miss luck with getting results, and I am just not sure if there is a lag in making the text searchable or if something in my code is preventing it from showing up in search results.
    Thanks!
    by Paula on Aug 20, 2013.
  40. Hi, Paula!
    That's interesting! We'll look into this and get back to you. :)

    Best,
    -Cindi
    by Cindi Trainor on Aug 20, 2013.
  41. This is great! However, is it possible to not have images next to the question? Instead, besides / under the question is a link that reads 'Open' and at the bottom of the answer, another link that reads 'Close'.

    E.g. "Question 1? - Open "

    "Answer to question 1

    Close "

    Hope that makes sense!
    by Dave on Aug 23, 2013.
  42. Further to my previous comment, I think the 'Click To Replace Display' works better for me, but is it possible to set up so that the 'first' answer is not displayed? Just a list of questions, that start opening up on the first click.
    by Dave on Aug 23, 2013.
  43. Hi Dave!
    In answer to your first question, I'd need to look and play with the code to see if it's possible. If you've already started to work on this, please send me the page URL so that I can take a look.

    About the second question, just change just change the display:block; in the first div to display:none;.
    That should do it!
    by Valentina Mayz on Aug 23, 2013.
  44. Is it possible to nest one javascript menu inside another?
    For example, the top menu would be letters of the alphabet. Open "A" to get a list of journal titles that begin with the letter "A"; open each title to get the range of holdings for that title.
    by Reba Curtiss on Aug 27, 2013.
  45. Hi, Reba!
    If you have a guide where you're attempting this, can you email the link to support@springshare.com?

    Thanks!
    Cindi
    by Cindi Trainor on Aug 27, 2013.
  46. To Jason (post 37) - we got around this by writing up and formatting the text in another guide then copying and pasting the plain text code for it into the "Answer" section. This way we could create tables, use images etc without having to know much about code. To edit, it's a case of copying the code back to another box on a private or test guide, editing it in rich text and then pasting it back again.
    by alison on Sep 18, 2013.
  47. I really love the answer (with two js scripts) here. The codes are concise, clear, and explanation/notes are succinct and very helpful. Absolutely well done.

    Thanks a lot!
    by Gregory on Dec 23, 2013.
  48. Thank you, Gregory!
    by Valentina Mayz on Dec 23, 2013.
  49. Hello,
    I'm trying to use this nice feature but I don't know how the arrow returns to the original shape when you close the question.

    http://guiesbibtic.upf.edu/content.php?pid=464287&sid=3801413#17023486

    Thanks

    Anna
    by Anna on Jan 31, 2014.
  50. Hi Anna
    I took a look at your site, and the reason the closed image is not working is because two of the exact same boxes are on the same page.
    If you move or delete one of the boxes then the closed image will display properly when you close the text.
    All the best,
    - Zinthia
    by Zinthia Briceno on Jan 31, 2014.
  51. Is it possible to do this with a Links and Lists box? That is, have some of the links hidden until a header is clicked? I have some super-long lists of links and would love to have them collapsed down in categories, but still have the features of a Links box (rather than creating it entirely in a Rich Text box). Thanks!
    by Meghan on Mar 19, 2014.
  52. Hi Meghan,
    It's not feasible but you can try entering the description text in the "More Info" field, so that the text appears in a popup tooltip instead when a user hovers over the link.

    Hope this helps!
    by Valentina Mayz on Mar 19, 2014.
  53. What a great piece of code. Thank you!!!!!!
    by David on Jul 29, 2014.
  54. Is there a way to do this within the Link boxes?

    For example, lets say I have a box with lots of links and I want to be able to collapse them - is there a way to do that? I saw that there is a way to do a collapsible subject menu, but I'd love the functionality of the Link boxes.

    Thanks!
    by Andrew on Sep 04, 2014.
  55. Hi Andrew!
    Interesting question. The only and probably simplest approach I can think of is to have the box with the list of links live in a storage guide/page that your public might not see, and then use this FAQ's code; except instead of putting content inside the show/hide area, you use that box's API embed code as *the* content. See: http://guidefaq.com/a.php?qid=1920


    I hope this helps!
    by Valentina Mayz on Sep 05, 2014.
  56. I have got the closed arrow working, and the linked list underneath - but cannot seem to get the open arrow to show. Any suggestions?
    Many thanks!
    by Emma Chapman on Sep 22, 2014.
  57. Hi, Emma,

    Can you post a link to the guides or pages you're trying this on, so we can take a look?
    by Greg Sigountos on Sep 23, 2014.
  58. When I try to use it a second time on the same page, It opens the first one. Why is that?
    by IsAiAh on Nov 22, 2014.
  59. Hi, Isaiah!

    The reason it opens the first one is because the javascript is targeting an ID. Each unique ID is only supposed to appear once per page, and so the script is going to stop as soon as it sees the first ID, never seeing the second.
    You'll have to change the ID attributes for the second time you use this in the code.
    by Greg on Nov 24, 2014.
  60. Worked like a charm (with a little knowledgeable editing of course), but is there a way to add a sort of padding to the expanded text/answer area?

    When I open the dropdown the text just reads a bit to close to the next DIV. I know how to do it with everything but script!
    by Nate on Feb 09, 2015.
  61. Hi, Nate!

    You can use CSS to modify the spacing too! Try this rule in your stylesheet:

    div[id^=para] {
    margin-bottom: 1em;
    }
    by Greg Sigountos on Feb 09, 2015.
  62. In the Show/Hide option, I am having trouble with the expanded text. (It's not appearing!)
    by Kayla on Feb 26, 2015.
  63. How to create faq page ???
    by Mahesha on Sep 15, 2015.
  64. Hi Mahesha,
    This page is about adding code to make a question in LibAnswers version 1 behave a certain way. For more information on LibAnswers v1, including how to create FAQs (public questions), please see our help guide:

    http://help.springshare.com/introla

    Best,
    -Cindi
    by Cindi Blyberg on Sep 15, 2015.
  65. Your code works great when I modify it and test it on w3schools.com, but when I paste it into the webpage I'm designing, when it goes live, it presents the closed answer arrow with the question, but it has the answer displayed below it. Clicking once causes the answer to disappear, clicking again causes the down arrow to appear and the answer to appear. Advice?
    by Debra on Nov 25, 2015.
  66. Hi Debra,
    Can you send a link to the guide or page where you are trying to make this work to support@springshare.com so we can take a look?
    by Carrie on Nov 25, 2015.

Need Help?

This site contains FAQs for LibGuides v1 only.

LibGuides v2 Documentation
(You must have a LibApps account to access that site.)

Or click HELP in the orange command bar of your v2 system.

Support:

Follow LibGuidesFAQ on Twitter Follow us on Twitter!
 Your questions, answered!

Browse by Popular Topics

Accounts  –  Admin Area  –  API / Widgets  –  Boxes  –  Catalog / Database Integration  –  CSS  –  Customization  –  E-Reserves  –  Embedding Objects  –  General System Questions  –  Group Management  –  Guides  –  Holiday Closures  –  How To...  –  Images  –  LibGuides CMS  –  Links  –  Mobile  –  Pages / Tabs  –  Profiles  –  RSS  –  Search  –  Security  –  Statistics  –  Subject Categories  –  Survey/Form Tool  –  System Administrators  –  Tags  –  Webinar  
View All Topics

Related content from Springshare v1 Help