[Zebrastripes]

I have a problem with my html coding somewhere, and I can't figure it out. It works in IE and Chrome, but not in Firefox, and I need it to work in all browsers. Here's the link: http://kcldancesoc.co.uk/?page_id=711 You can see the source, if you're browsing in anything buy Firefox it should work.. I can't figure out why it won't in mozilla. Any ideas I'd really appreciate the help.

[Dez]

It's working fine for me, Firefox 3.5.5.

[Zebrastripes]

(Original post by Dez)
It's working fine for me, Firefox 3.5.5.

How strange! I'm using 3.5.5. too. I get 4's where the bullet marks are supposed to be, and it doesn't expand or do anything on clicking. That's why i put a disclaimer link in to go to a seperate page. Hmmm... don't know what's going on!!

[dave_chapman]

Well the 4s are there because you've put them in the source code - they should be there in every browser, not just firefox. Use <ul> and <li> instead of Webdings as a lot of computers won't have it and I don't think firefox uses it.

With regards to the javascript - firefox doesn't like window.event so I would use document.getElementById(id).styl e.display = 'block';

You can do something similar to change the style of bullet points as well - look it up on w3c

[Zebrastripes]

(Original post by dave_chapman)
Well the 4s are there because you've put them in the source code - they should be there in every browser, not just firefox. Use <ul> and <li> instead of Webdings as a lot of computers won't have it and I don't think firefox uses it.

With regards to the javascript - firefox doesn't like window.event so I would use document.getElementById(id).styl e.display = 'block';

You can do something similar to change the style of bullet points as well - look it up on w3c

Thank you! Where do I but the document.getElementById(id).styl e.display = 'block'; ? Do i just replace the window.event with that?

This is the script I'm using at the mo:

<p><script>
function exp(strTag ,strAttribute){
var elem = document.getElementsByTagName(st rTag);
var elem1 =window.event.srcElement;
for (var i=0;i<elem1.children.length;i++) {
elem1.children[i].innerText=="4"?elem1.children[i].innerText="5":elem1.children[i].innerText="4"; }
for (var i =0;i<elem.length;i++)
{ if(elem[i].getAttribute(strAttribute)=="ye s")
{ elem[i].style.display=='none'? elem[i].style.display='block':elem[i].style.display='none';
} } }
</script> </p>

[Zebrastripes]

Okay so I'm now using this script which works, but it shows up expanded first, rather than collapsed.. how do i change this?

<script type="text/javascript">
function toggle(divName){
if(document.getElementById)
{
var theDiv = document.getElementById(divName) ;
if(theDiv)
{
if(theDiv.style.display == 'none')
{
theDiv.style.display = 'block';
}
else
{
theDiv.style.display = 'none';
}
}
}
}
</script>

[darkraver]

(Original post by Zebrastripes)
Okay so I'm now using this script which works, but it shows up expanded first, rather than collapsed.. how do i change this?

You will need to use CSS to change every 'expandable' div's 'display' attribute to 'none'

Ie:

Let's say you have a div which is expandable called 'howdy'

Then you may have:

<div id="howdy">...</div>

Replace that with

<div id="howdy" style="display: none">...</div>

Actually that won't work very well, it will remove the 'title' text as well.

Can I suggest a better alternative that is guaranteed to work on every browser?

[Zebrastripes]

(Original post by darkraver)
You will need to use CSS to change every 'expandable' div's 'display' attribute to 'none'

Ie:

Let's say you have a div which is expandable called 'howdy'

Then you may have:

<div id="howdy">...</div>

Replace that with

<div id="howdy" style="display: none">...</div>

Actually that won't work very well, it will remove the 'title' text as well.

Can I suggest a better alternative that is guaranteed to work on every browser?

Yes please!

[Zebrastripes]

Actually, adding style="display none" works! I'm not really using div.. so its like <ul id="choreo" style="display: none"> Thank you!!!

[darkraver]

Well if it works, then that's great. I thought the title/heading text was contained inside the div as well, so it would remove that too. But if it works, then great!

I was going to suggest jQuery which gets rid of all your browser related problems and simplifies DOM handling + JS scripting.

[Baron]

If you want to support non javascript browsers, it might be good to have the CSS set the accordion expanded by default and then close it with javascript on body load.