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:)
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:)