/    Sign up×
Community /Pin to ProfileBookmark

Expand/Colapse in IE8

Copy linkTweet thisAlerts:
Mar 16.2011

I find myself with a really odd problem. The Expand/Colapse feature seems to be failing in IE8.
I first noticed that my CHM pages no longer expanded (which might be a problem for clients), and so I tried a few different approaches (all fail), and even tried the blah blah blah code on [URL=”http://www.webdeveloper.com/forum/showthread.php?t=77389″]http://www.webdeveloper.com/forum/showthread.php?t=77389[/URL]

Great. It works like it should in Firefox (both 3.whatever and 4.0beta) and in Google’s Chrome. But for the life of me, it won’t expand or colapse in IE8.

I think that I have all the javascript options set correctly.

Has anyone else had a problem with IE8 (running under 64-bit Win7 on a Dell Latitude)

to post a comment
HTML

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorMar 16.2011 — Don't make us poke about a 6 years old Thread in order to guess what is all about that blah blah blah blah code!

Forget about that Thread. Post here what code you have (or a link to a test page) and tell us which is your problem.
Copy linkTweet thisAlerts:
@hicksiauthorMar 16.2011 — I just found something REALLY odd.

That page http://www.webdeveloper.com/forum/showthread.php?t=77389

contains some code that shows as blue buttons for expanding (Reply by Ultimater on 04-17-2006, 07:56 AM). What is odd is that the code in that reply doesn't solve my problem.

But he (she) refers to a link in that reply, which opens a new IE window as http://javascript.internet.com/miscellaneous/expand-collapse-paragraph.html.

Now, ON THAT PAGE, the expand/colapse works.

Go figure!!!
Copy linkTweet thisAlerts:
@hicksiauthorMar 16.2011 — OK. The blah blah blah code is

[CODE]<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>

<input type="button" onclick="return toggleMe('para1')" value="Toggle"><br>
<p id="para1">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</p>
<br>
<input type="button" onclick="return toggleMe('para2')" value="Toggle"><br>
<div id="para2">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<br>
<input type="button" onclick="return toggleMe('para3')" value="Toggle"><br>
<span id="para3">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</span>[/CODE]

The blue-button code (on that page) which I can copy into a file x2.htm and run in various browsers is:

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title></title>
<style type="text/css">
input.button {
color: #fff; background: #0034D0;
font-size: .8em;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: solid 1px #ffcf31;
}
</style>
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}
</script>
</head>
<body>

<div>
<input type="button" class="button" onclick="return toggleMe('para1')" value="Are the JavaScripts here free?">
</div>
<div id="para1" style="display:none">
Yes, all the scripts on this site are free for personal or business use. The only requirement for using them is that you leave the credit information inside the script.
</div>
<div>
<input type="button" class="button" onclick="return toggleMe('para1')" value="Are the JavaScripts here free?">
</div>

<div><br></div>

<div>
<input type="button" class="button" onclick="return toggleMe('para2')" value="What is JavaScript? Is it the same as Java?">
</div>
<div id="para2" style="display:none">
JavaScript is NOT Java. JavaScript is a basic scripting language that allows Web authors to create dynamic pages that react to user interaction.
</div>
<div>
<input type="button" class="button" onclick="return toggleMe('para2')" value="What is JavaScript? Is it the same as Java?">
</div>

</body>
</html>[/CODE]

But the link that it all refers back to (yes, I know that it's all ancient code, that's why it's annoying me) is

http://javascript.internet.com/miscellaneous/expand-collapse-paragraph.html

and for some reason, the IE8 web page that shows when I click that actually WORKS.
Copy linkTweet thisAlerts:
@hicksiauthorMar 16.2011 — ... and be nice.

I didn't comment about your choice of ManUre as a football club.
Copy linkTweet thisAlerts:
@KorMar 16.2011 — OK. Now: [I]Which[/I] is your problem? The code works in IE8. So?
Copy linkTweet thisAlerts:
@hicksiauthorMar 16.2011 — OK. Now: [I]Which[/I] is your problem? The code works in IE8. So?[/QUOTE]
No.

The code in the first code box DOESN'T work. I copy it to a local file X.HTM, and if I use IE8 to view it, the buttons labelled 'toggle' don't toggle (but they do in Firefox and Chrome)

The code in the second code box DOESN'T work. I copy it to a local file X2.HTM, and if I use IE8 to view it, the blue 'buttons' don't toggle (but they do in Firefox and Chrome)

If I click the link, then it opens in a new window. That's another full thread for this site, with all the surrounding page information that goes with threads. On THAT page, the blue 'buttons' DO toggle (and in Firefox and Chrome).

I'll try to figure out now what differences there are, and if I get to the bottom of it, I'll be puting that into this thread.

It's intriguing, because I was sure someone would have had expand/colapse fail in IE8 before now.
Copy linkTweet thisAlerts:
@hicksiauthorMar 16.2011 — Sleep-time for this Aussie. It's getting close to midnight.

Thanks in advance to anybody who has had (and solved) this problem.
Copy linkTweet thisAlerts:
@KorMar 16.2011 — 
The code in the first code box DOESN'T work. I copy it to a local file X.HTM, and if I use IE8 to view it, the buttons labelled 'toggle' don't toggle (but they do in Firefox and Chrome)

The code in the second code box DOESN'T work. I copy it to a local file X2.HTM, and if I use IE8 to view it, the blue 'buttons' don't toggle (but they do in Firefox and Chrome)[/QUOTE]
I am sorry to contradict you, but both codes work in all the browsers, including IE7, IE8, IE9. / Win7

Once again,[I] which[/I] is your problem? [I]What[/I] DOESN'T work? can you be more descriptive, please?
Copy linkTweet thisAlerts:
@hicksiauthorMar 16.2011 — I am sorry to contradict you, but both codes work in all the browsers, including IE7, IE8, IE9. / Win7

Once again,[I] which[/I] is your problem? [I]What[/I] DOESN'T work? can you be more descriptive, please?[/QUOTE]

When I copy that code from the second codebox into a file X2.htm on my PC (for now, let's ignore the first as it's code without any DOCTYPE tags)

then it displays 4 blue text-buttons (2 of one saying Are the Javascripts here free, and 2 with a longer message).

In FIREFOX, when I click them, then the expanded section is shown, and when I click again, then it colapses again. GREAT.

In IE8 (and I am thinking this is some setting that I have that is not appearing in the tests) it doesn't expand or colapse. And from what I've seen in my CHM-Help, it's the function that won't work:- pages that are initially expanded are displayed expanded (and won't colapse); pages that are initially colapsed are displayed colapse (and won't expand).

What I really need to determine is what setting is causing IE8 to not expand/colapse that code. It would seem that something in the linked page is generating the correct setting (be it compatibility or cookies or enabling some setting) - I don't know.
Copy linkTweet thisAlerts:
@KorMar 16.2011 — As I said, I don't understand what kind of tests you have done. Both codes work in IE8. At least in my IE8. Of course, [I]if the document has a [B]Doctype[/B][/I], and this thing is [I]important[/I]. Without a DTD, browsers work in quirks mode, which is not predictable ?
Copy linkTweet thisAlerts:
@rizzaocampoMar 16.2011 — save this as collapse.js


<!--

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)

var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change

document.write('<style type="text/css">n')

document.write('.submenu{display: none;}n')

document.write('</style>n')

}

function SwitchMenu(obj){

if(document.getElementById){

var el = document.getElementById(obj);

var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change

if(el.style.display != "block"){ //DynamicDrive.com change

for (var i=0; i<ar.length; i++){

if (ar[i].className=="submenu") //DynamicDrive.com change

ar[i].style.display = "none";

}

el.style.display = "block";

}else{

el.style.display = "none";

}

}

}

function get_cookie(Name) {

var search = Name + "="

var returnvalue = "";

if (document.cookie.length > 0) {

offset = document.cookie.indexOf(search)

if (offset != -1) {

offset += search.length

end = document.cookie.indexOf(";", offset);

if (end == -1) end = document.cookie.length;

returnvalue=unescape(document.cookie.substring(offset, end))

}

}

return returnvalue;

}



function onloadfunction(){

if (persistmenu=="yes"){

var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname

var cookievalue=get_cookie(cookiename)

if (cookievalue!="")

document.getElementById(cookievalue).style.display="block"

}

}



//-->



[/QUOTE]



put this on your head tag





<script language="JavaScript" src="../scripts/collapse.js" type="text/JavaScript"></script>

<script language="JavaScript" type="text/JavaScript">

document.body.onload =+ " SwitchMenu('sub1');";

</script>

[/QUOTE]





put this on your body div : you should always have a master div





<div id="masterdiv" style="cursor:pointer; ">

<div onclick="SwitchMenu('sub1')" class="collapse"></div>

<span class="submenu" id="sub1">blah blah</span>

<div onclick="SwitchMenu('sub2')" class="collapse"></div>

<span class="submenu" id="sub2">blah blah</span>





and so on and so forth! ?



</div>

[/QUOTE]



this works...
Copy linkTweet thisAlerts:
@rizzaocampoMar 16.2011 — eagleswfl.com this site has a collapse.js
×

Success!

Help @hicksi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...