PDA

View Full Version : Switch Content Script with "<ul>"



bambam
02-10-2009, 03:24 PM
1) Script Title: Switch Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

3) Describe problem:

EXAMPLE (http://www.flickr.com/photos/27049597@N03/3268892965/)

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 (http://www.flickr.com/photos/27049597@N03/3268892965/) 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 :rolleyes:)

ddadmin
02-10-2009, 07:08 PM
If you're looking to create collapsible UL lists, a much better solution would be something like jQuery TreeView menu (http://www.dynamicdrive.com/dynamicindex1/treeview/index.htm). Switch Content script by default handles only 1 level of collapsing content- getting it to work on multiple levels can get messy quick.

bambam
02-12-2009, 10:08 AM
Great, thanks for your help! I'll try that then and might get back to you guys if there's a problem.

Thanks again!