CSS Help

[suarve]

Hi,

I have a simple list with 5 items. For each item there is a seperate paragraph of text relating to to the list item. When i click on the list is it possible to have some css/javascript that displays this paragraph for each item below the list?

Thanks

 

[suarve]

Well found a bit of code on the net that does the job in IE, but nothing happens in Firefox. Any ideas?
Have put the script in the head tag:

<script language="javascript">
function ShowHide(element){    
    target = document.all(element);
    target.style.display = (target.style.display=="none" ? "" : "none");
}
</script>

Then display a div like so:

<a href="javascript:ShowHide('SomeDivName')">Information gathering (including aims and objectives).</a>

<div id="SomeDivName" style="display:none"> 
      Stuff in this div to toggle
</div>

 

[marc2003]

document.all is IE only. try this instead.

<script language="javascript">
function ShowHide(element){    
   document.getElementById(element).style.display = ((document.getElementById(element).style.display=="none") ? "" : "none");
}
</script>

 

[suarve]

document.all is IE only. try this instead.

<script language="javascript">
function ShowHide(element){    
   document.getElementById(element).style.display = ((document.getElementById(element).style.display=="none") ? "" : "none");
}
</script>

Many thanks.

Was going crazy for a second there

 

[suarve]

Hi again.

Hope somecan help me out here, as I'm driving myself crazy.

I am using a list with 5 items - x1 div below each list item. When a user clicks a list item the div below it will be displayed. When the user clicks a different list item, the current div will be hidden and the new div displayed. I have used a colleagues code that they assure me works, but I simply can't get it working.

I'm using the following javascript in the script tag:

    div = new array() 
    div[0] = "div1" 
    div[1] = "div2"
    div[2] = "div3" 
    div[3] = "div3" 
    div[4] = "div5" 

function ShowHide(id) {
    for (var i = 0; i < div.length; i++) { 
    var layer = document.getElementById(div[i]); 
    if (id != div[i]) { 
    layer.style.display = "none"; 
    }else{ 
    layer.style.display = "block"; 
    } 
    } 
 }

and have my list like this:

<ul class="main">
            <li class="maintext2"><a href="javascript:ShowHide('div1')">Item 1</a></li>
            <li class="maintext2"><a href="javascript:ShowHide('div2')">Item 2</a></li>
            <li class="maintext2"><a href="javascript:ShowHide('div3')">Item 3</a>.</li>
            <li class="maintext2"><a href="javascript:ShowHide('div4')">Item 4</a></li>    
            <li class="maintext2"><a href="javascript:ShowHide('div5')">Item 5</a></li>
        </ul>

<div id="div1" style="display:none">
           ghfghfghfghf
        </div>
        
        <div id="div3" style="display:none">
            hjhjghjhjgh
        </div>
        
        <div id="div4" style="display:none">
            ytyrtyrtyrty
        </div>
        
        <div id="div5" style="display:none">
            hyutyutyutyutyuty
        </div>

Any ideas????

Thanks

 

[marc2003]

replace

div = new array()

with

var div = new [B]A[/B]rray();

note it's case sensitive. also add a ; to end of each div assignment immediately below that.

 

[suarve]

Woah! Record response! Thanks

I'm so out of practice with Javascript and wasted a whole hour this afternoon looking at that

I used the accordian from mootools - that i personally thought looked good, but i was told that I can't use it on a commercial clients website????? Alwasy thought mootools and simil;ar was opensure. meh

 

[marc2003]

I used the accordian from mootools - that i personally thought looked good, but i was told that I can't use it on a commercial clients website????? Alwasy thought mootools and simil;ar was opensure. meh

that sucks. explain to the numpties that all major sites use javascript libraries nowdays.