Skip to Questions

Guide FAQ - Your LibGuides v1 Questions. Answered!


Can I make a box like the ones you have in Systemwide settings, where the title contains a black arrow that collapses or expands the box?

Last Updated: Aug 06, 2013  |  2206 Views
Topics: Boxes

Was this helpful? 2   0


At the moment, there is no way to do this for all box types...though we are looking into ways we can provide "collapsible boxes" in the system.

Until this exists in the system, we do have a work long as you use a Rich Text box. ;)

Note: Items in RED need to be changed if reused in different boxes but they must match up. For example, the term BOX is used to represent the Div ID. If you change this term to anything else, it must match up in both locations that are in red. If you plan on reusing the code in multiple guides, you must change the Div ID as it has to be unique.

Also note that all content must be added using the Plain Text Editor, NOT the Rich Text Editor.


  1. Add a Rich Text box to your page.
  2. Click add text, then click the Plain Text Editor tab at the top of the box. (See screenshot above.)
  3. Copy and paste this into the Plain Text Editor:
    <script type="text/javascript">
    function toggle_visibility(id) {
    var e = document.getElementById(id);
    if( == 'block') = 'none';
    else = 'block';
    return false;

    <div id="box" style="display:none">
    <p>Insert all the text for your box here. You have to use the plain text editor and enter everything in HTML using HTML tags</p>
  4. Add the following snippet of code to the TITLE of your Box (this is where the toggling will occur):
    <a onclick="return toggle_visibility('box');">Insert a Box Title here</a>

Voila! Done!

To view this in action, check it out on a test guide I created.

Answered by Anna BurkeBookmark and Share

Other Answers / Comments (13)

  1. These instructions are great! Thank you for posting them! Can it only be used with a rich text box? I tried it with links and lists and while the text portion works fine, the link portion does not collapse. Unless I leave out the end div tag, which messes up the columns/box arrangements on the page. Is there a way around this?
    by Aileen on Feb 08, 2011.
  2. I also like this feature. I notice that clicking on the link/title makes it "jump" back to the top of the page. Is there anyway to suppress this? Thanks!
    by Ann Kucera on Jul 11, 2011.
  3. Hey Ann - just leave out the href="#" - that's what's making it jump back to the top. It's mainly used so the cursor changes to be the usual "this is a link" cursor...but if you're using it farther down the page, it makes it jump back to the top. :)
    by Anna Burke on Jul 11, 2011.
  4. Aileen - yes, this can only be used with a Rich Text box (or the rich text portion of a box) because that's the only area where you can add the div tags. Sorry about that!
    by Anna Burke on Jul 11, 2011.
  5. If you can figure out a way to do this with all boxes, that would be really great for the mobile versions of pages. On the mobile version of a guide, it's really useful to have the pages on a guide show as collapsible boxes; it would be awesome if the boxes on each page could also be collapsed (boxes in boxes). Does that make sense?
    by Stephen Francoeur on Jul 18, 2011.
  6. We did something similar. Have a look at our guide: . We tried to create a kind of (Hebrew) lexicon of library language for freshman. Clilicking on a term shows the explanation...
    by Tiran on Apr 05, 2012.
  7. When I tried to use this feature and clock on the box title to toggle it, the box just disappears. Also none of the content text that I have added shows up ever. Any ideas?

    On another note is this possible for items with embedded content in them yet?
    by Ayla on May 16, 2012.
  8. Hi, Ayla -

    Unfortunately, no, this trick can still only be used with a Rich Text box.

    I'll e-mail you about the disappearing box so that we can hunt down the cause and hopefully get it fixed! :)

    by Laura Harris on May 16, 2012.
  9. When I visited the demo page at, I noticed a working expandable/collapsible menu for links and lists. If this feature is now available, can you share the instructions please?
    by Sharon on May 21, 2013.
  10. Sharon,The Code Needed is below. Add it to the box's plain text editor and change the boxatt### with your own box's ID.


    by Zinthia Briceno on May 21, 2013.
  11. How do I make this work WITHIN a box, not using the title of the box as the toggle? I would like it to look and work like Tiran's (the Hebrew lexicon in the comments). Thanks.
    by Mary on Nov 07, 2013.
  12. Hi Mary-
    You can do this by using the instructions on this FAQ -
    by Michelle Lustig on Nov 07, 2013.
  13. This is a great work around and solves my problem perfectly -- thank you!
    by Kate on Jan 29, 2016.

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.


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  
View All Topics

Related content from Springshare v1 Help