Skip to main content

LibGuide Stuff: Design tips


collapsible text code

The key here is the code. Here's an example of what you can do (look at the html to see how it works):

Browsing the Stacks

And here's how you do it: 

You need this first set of script just once in your code:

<script type="text/javascript">// <![CDATA[
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
} else {"none"
return true;
// ]]></script>

And you need this next set for each item you want to collapse (the things in red are CRITICAL the rest, well...).  

<p><a onclick="return toggleMe('Brainstorm')"><b>Browsing the Stacks</b></a></p>
<div id="Brainstorm" style="display: none;" mce_style="display:none"><b> </b> <span style="font-size: small;"><span style="font-family: arial,helvetica,sans-serif;">Break up sentences or long phrases </span><span style="font-family: arial,helvetica,sans-serif;">into</span><span style="font-family: arial,helvetica,sans-serif;"> separate search terms. Write down initial search term ideas. Add to this list as you search and encounter other potential search terms. Cross off terms that aren't working.</span></span><br /><br /></div>

The 'Brainstorm' in the first line and the "Brainstorm" in the second tell the computer what to point to - very important.  Call it whatever you want it to be in your guide but they have to be the exact same.  The rest is text and code for that text - which you can change as you need.

Happy to help if you can't make it work.  The key is to not mess around with the code too much - just changing your text as necessary.  

- Lareese

Official colors

Basic colors

light green - #c3d7A4 - color used for the box header background

dark green - #00703C

white - #FFFFFF

black - #000000

Secondary colors

cream - #FFF6DC

gold/yellow - #f0cb00

teal, dark - #00728F

teal, light - #76A9AA

orange - #F3901D

red? - #DE3A6E

purple - #731472

light gray - #EEEEEE

tan, light - #E1D5BF

tan, medium - #CBAE86

tan, dark - #A69667

brown, dark - #543A29