Switch Content Script with "<ul>"

[bambam]

1) Script Title: Switch Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tchcontent.htm

3) Describe problem:

EXAMPLE

I would like to hide/show subclauses in an unordered list at the click of a button. As an amateur I'm making quite a messy job of this as I go along and I'm starting to realise that it makes more sense to try and get a kick in the right direction before I go any further!

See the EXAMPLE of what my original page looks like here.

The current HTML looks like this:

      <td colspan=2><div id="main text">
		<ul class="one">
			<li><strong><a href="http://music.booseytracks.com/search/html/popup_cddetails_i.php?cdkurz=AB-C017128&w=tr&" target=_blanl">Dubby</a></strong> – when describing music, this generally means ‘laden with effects’ and refers to dub reggae, where musicians would create a version of a song and add effects to various elements of it
			<li><strong>Effects</strong> – types of
			<ul class="sub">
				<li><strong>Chorus</strong> – yes, everyone knows that the chorus is the repeated, catchy bit in a song. But did you know that it is also an effect which takes a sound and plays it over itself in a slightly changed way to make it sound like more than one instruments are playing?
				<li><strong>Delay</strong> – echo that repeats the sound e.g. ECHO-ECHo-ECho-Echo-echo
				<li><strong><a href="http://music.booseytracks.com/search/html/popup_cddetails_i.php?cdkurz=SCD048829&w=tr&" target="_blank">Phaser/Flanger</a></strong> – The first is not a space-age gun and the second is not at all what you’re thinking. These are effects which put a sound in and out of time with itself creating whooshing and/or space-age sounds
				<li><strong><a href="http://music.booseytracks.com/search/html/popup_cddetails_i.php?cdkurz=STRP000206&w=tr&" target="_blank">Reverb</a></strong> – echo that sustains the sound e.g. echo-o-o-o-o-o-o
			</ul>
			<li><strong><a href="http://music.booseytracks.com/search/html/popup_cddetails_i.php?cdkurz=CAVC0252381&w=tr&" target="_blank">Legato</a></strong> – the opposite of staccato, this means ‘played smoothly’, with the notes joined up like your very best handwriting
			<li><strong><a href="http://music.booseytracks.com/search/html/popup_cddetails_i.php?cdkurz=CAVC024413&w=tr&" target="_blank">Marcato</a></strong> – Italian for ‘marked’. Every note is played with an emphasis

where the css is:
#maintext
{
font-size:12px;
}

ul.one
{
width:70%;
margin-left:10%;
font-size:12px;
list-style-type: disc;
padding: 0 0 0 20;
}

ul.sub
{
list-style-type:circle;
list-style-image:url(dot2.gif);
marker-offset: 5px;
}

I would like to make the <li>s in the "sub" class collapse when you click on 'effects'. I also have other pages where there are a number of these subclauses where I'd like to do the same thing - I realise that I may have to change around the CSS tags and styles etc. (Also I'm not sure why I have a div id called maintext when I can tie that to the main css style )

[ddadmin]

If you're looking to create collapsible UL lists, a much better solution would be something like jQuery TreeView menu. Switch Content script by default handles only 1 level of collapsing content- getting it to work on multiple levels can get messy quick.

[bambam]

Great, thanks for your help! I'll try that then and might get back to you guys if there's a problem.

Thanks again!