Accordion puzzle in quirks mode

JavaScript
1

Continuing the discussion from JQuery accordion puzzle in quirks mode:

It could be that the jQuery you are using is not suited to IE6. The following is recommended for older versions of IE.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

As an alternative I have re-worked your example using generic Javascript that does work in all IE from IE6 onwards. It is pasted below. I have placed the onclick handlers into the html so that you can see clearly how they work. I have also added the style.display attribute to the nodes that will be toggled to allow them to be tested by the script without needing to initialise on loading.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Toggle</title>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:14px; color:#000; text-align:left; }
#nav { width:300px; margin-left:20px; padding:10px; border:1px solid #CCC; }
h3 { font-size:16px; font-weight:bold;  }
h3.tog { cursor:pointer; color:#00F; text-decoration:underline; background-image:url('scripts-img/16-arrow-down.gif'); background-position: right top; background-repeat:no-repeat }	
ul.menu a { color:#F00; }
</style>
</head>

<body>

<div id="nav">
  <h3>Leadership and Management</h3>
  <h3 class="tog" onclick="togg('div1',this)">Functional Academies</h3>
  <div id="div1" style="display:none">
    <ul class="menu">
      <li><a href="#">Audit</a></li>
      <li><a href="#">Communications</a></li>
      <li><a href="#">Finance</a></li>
    </ul>
  </div>
  <!-- end div1 -->
  <h3 class="tog" onclick="togg('div2',this)">Other Divisional Academies</h3>
  <div id="div2" style="display:none">
    <ul class="menu">
      <li><a href="#">Group Operations</a></li>
      <li><a href="#">Insurance</a></li>
    </ul>
  </div>
  <!-- end div2 -->
</div>
<!-- end nav -->
<script type="text/javascript">
 var openObj=[];  // global
 function togg(ref,clickedObj)
  { var refObj=document.getElementById(ref);
    // check if already open and close it
    if(typeof openObj[0] !="undefined" && openObj[0] !=refObj)
      { openObj[1].style.backgroundImage="url('scripts-img/16-arrow-down.gif')";
        openObj[0].style.display="none";
       } 
    // toggle clicked object          
    var result=(refObj.style.display=="none")? ["block","16-arrow-up.png"] : ["none","16-arrow-down.gif"]; 
    refObj.style.display=result[0];   
    clickedObj.style.backgroundImage="url('scripts-img/"+result[1]+"')"; 
   // set refs to current open object 
    openObj=[refObj,clickedObj];   
  }
</script>

</body>

</html>
2

Hey there.

Thanks for your effort with this. However, in the future, I recommend you look at the thread dates, since that thread was created in 2010 (5 years ago), and most certainly has moved away from this problem.

IE6 has ~ 0 users so that should have been an even bigger hint that this was an old thread :slight_smile: .

2 Likes
3

[ot] I am surprised the topic was not closed after three months?
[/ot]

4

I’m assuming that automatic rule might not apply to old threads, started on the vBulletin SPF?

1 Like
5

It was closed. It just doesn’t have a closed message. Which is why the OP used Reply as Linked Topic to post his reply.

3 Likes
6

Whoops, that was obvious. Sorry lol.

7

Sorry fellas, I should have looked at the date. Lots of changes since I was here last!

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.