[thelist] Adding an indicator to collapsable content

Gijs van Tulder evolt at gmx.net
Sun Jan 30 15:29:57 CST 2005

Hi Dave,

If you show and hide content by changing the CSS class, you can use those classes to change the background of the links. For example: use a plus sign as the background for links with the 'collapsed' class, and a minus sign for links in the 'expanded' class.

See an example on:

Every collapsible block is a div. Collapsed blocks have class="collapsed", expanded blocks have class="expanded". Inside each div is a <h2>, a heading that can be clicked to display/hide the containing div:

/* give expanded headings a -, collapsed headings a + */
.expanded h2 {
	background: url("minus.gif");
.collapsed h2 {
	background: url("plus.gif");

/* hide content in collapsed div */
.collapsed p,
.collapsed div {
	display: hidden;

Hope this helps,


Gijs van Tulder

> -----Original Message-----
> From: thelist-bounces at lists.evolt.org
> [mailto:thelist-bounces at lists.evolt.org]On Behalf Of Dave
> Sent: zondag 30 januari 2005 16:21
> To: thelist at lists.evolt.org
> Subject: [thelist] Adding an indicator to collapsable content
> List,
>     The Situation:
>     I have succeeded in getting content to show and hide using Java 
> Script and CSS. I would like to extend the idea just a 
> little further by 
> adding a small indicator by the link which activates the 
> show and hide 
> script.
>     All I want is a "+" beside the link when the content is 
> hidden, and 
> a "-" when it is shown. Like so:
>     In hidden state:
> + Click here to see stuff
>     In shown state:
> - Click here to see stuff
>     stuff
>     stuff
>     stuff
>     The Problem:
>     I have no idea how to do this. The show/hide action I'm 
> using was 
> taken from a tutorial on the net, and it was only by asking 
> questions 
> about it here that I got it to work.
>     What I've tried so far:
>     I looked again on the net for a more robust script, but while I 
> learned that what I was looking for was termed "collapsible 
> content", 
> and so how to make remote show and hides, I did not see a 
> script that 
> included an indicator like I am looking for.
>     The Question:
>     Can anyone recommend a script that does what I describe?
>     Any help much appreciated.
> -- 
> Dave Gutteridge
> dave at tokyocomedy.com
> -- 
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
> For unsubscribe and other options, including the Tip Harvester 
> and archives of thelist go to: http://lists.evolt.org 
> Workers of the Web, evolt ! 

More information about the thelist mailing list