Dynamic Expansion Script

Published Aug 4, 2011

We recently revamped the Law Society of Newfound and Labrador Library (LSNLL) catalogue interface. One of the features we added was a method to open and close the Table of Contents on the search results page.

The LSNLL catalogue interface, which uses Inmagic WebPublisher PRO, has always just had one form – a brief one - which pretty much consists of just a bibliographic citation, a call number and “see also” subject links. The previous brief form also had the Table of Contents displayed if that information was in the record. If there were Tables of Contents in several results records, this greatly added to the length of the brief list.

Rather than having a full display just to show the additional Table of Contents information and to also minimize the length of the brief display, we came up with a scripted solution that opens and closes the Table of Contents as needed. This could also be used to expand and contract full text in a textbase record or just text on a static page.

Here’s a short video illustrating how it works:

The details of the method are as follows:

Download a copy of jquery.js from http://jquery.com and insert it in a scripts folder under the layout folder (referenced from head tag in the form – see below).

In the DB/Text web form:

<div class="ShowHide"><a href="#">Table of Contents</a></div>

<div class="expandDiv"><div>TableofContents</div></div>

[TableofContents is the field, the rest is added beginning and ending text]

In the website CSS:

.expandDiv {display: none;
           margin-left:10px;
           padding:10px;
           border:1px solid #BEDCE7;
           -moz-border-radius:3px;
           -webkit-border-radius:3px;
           border-radius:3px 3px 3px 3px;}

.ShowHide {margin-top:10px;
width:150px;}

.ShowHide a {display:block;
           width:auto;
           margin:0 0 4px 0;
           padding: 3px 6px 5px 26px;
           font-weight:normal !important;
           background: #eaf2f5 url(images/folder_16.png) no-repeat 4px 50%;
           border:1px solid #BEDCE7;
           -moz-border-radius:3px;
           -webkit-border-radius:3px;
           border-radius:3px 3px 3px 3px;}

In the search results head tag:

<script type='text/javascript'>
		$(document).ready(function () {

			//Toggle for Table of Contents
			//Switch the "Open" and "Close" state per click 
                                 then slide 
                                 up/down (depending on open/close state)
			$(".ShowHide").click(function () {
				$(this).toggleClass("active").next()
                                .slideToggle("slow");
				return false; 
                        //Prevent the browser jump to the link anchor
			});

		});
</script>

If you need help setting up this nice neat solution to open and close a Table of Contents field or any other full text field, please contact one of us.