[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:
http://gvtulder.f2o.org/evolt/collapse/
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
--
Gijs van Tulder
http://gvtulder.f2o.org/
> -----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