CODEWITHSUNDEEP
jqueryhtmlinternet-explorer
sephiith
sephiith

Reputation: 1197

jQuery hide/show code not working in Internet Explorer

Why would the below piece of code work in Chrome and Firefox but not IE? How would I fix this?

There are no outputted errors that I can see.

Relevant jQuery

<script>
$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").hide();
    $(this).parent().next(".slidingDiv").slideToggle();
    });

});
</script>

Relevant HTML

                    <ul class="relatedInfoLinks">
                        <li><a class="drop show_hide" href="#drop">What are the new parts? </a>

                            <ul class="slidingDiv">
                                <li>CASR Part 61 – Flight Crew Licensing requirements</li>
                                <li>CASR Part 64 – Authorisations for non-licenced personnel to operate an aeronautical radio and taxi aircraft.  </li>
                                <li>CASR Part 141 – Pilot flight training other than certain integrated training</li>
                                <li>CASR Part 142 – Integrated and Multi crew pilot flight training </li>
                            </ul>
                        </li>

                        <li><a class="drop show_hide" href="#drop">Where can I find the new regulations?</a>
                            <ul class="slidingDiv">
                                <li>The Regulations are housed on the Com Law website and can be accessed through links on the CASA home page. </li>
                            </ul>
                        </li>
                        <li><a class="drop show_hide" href="#drop">Why is CASA introducing these new regulations?</a>
                            <ul class="slidingDiv">
                                <li>align with the International Civil Aviation Organization standards and recommended practices (making licences more transportable for our crews and benefitting local training institutions by attracting foreign pilots to train in Australia),</li>
                                <li>strengthen licensing and training requirements through the introduction of multi-crew training and flight testing for air transport licences (those required to undertake passenger services) and increased requirements for co-pilots,</li>
                                <li>improved standards for training organisations with a strong focus on flight activity and aircraft specific competency and the need for greater organisational planning through the requirement for safety and quality assurance systems,</li>
                                <li>better alignment with modern vocational education and training requirements centred on structured and competency-based training, delivered by competent and qualified instructors and assessed against clearly defined standards, and</li>
                                <li>address Australian Transport Safety Bureau recommendations through introducing requirements for ratings for low level flying and additional requirements for night time visual flying.</li>
                            </ul>
                        </li>
                        <li><a class="drop show_hide" href="#drop">Is compliance to the regulations required today?</a>
                            <ul class="slidingDiv">
                            <li>The regulations commence on 4 December 2013, therefore no immediate action is required by the aviation industry. </li>

                            <li>During this period CASA will be developing the communication and education material, building processes, amending CASA procedures manuals and developing guidance material (sample expositions, acceptable means of compliance etc.) for use by industry.
                            <ul>
                                <li>Current flight crew license holders will be transitioned to the new Part 61 licence system over a four year period. </li>

                                <li>Current flight crew training organisations will be allowed three years to comply fully with the additional requirements of Part 141 and 142.</li>
                            </ul></li>

                                <li>For existing licence holders the licence they hold on 3 December will still meet the requirements on 4 December.</li>
                            </ul>
                        </li>


                        <li><a class="drop show_hide" href="#drop">What is happening before 4 December?</a>
                            <ul class="slidingDiv">
                                <li>In the transition period CASA will be further developing the industry advisory material and delivery training and education to key industry members who will be facilitating the implementation and transition.  </li>
                            </ul>
                        </li>
                        <li><a class="drop show_hide" href="#drop">What if I want to know more?  </a>   
                            <ul class="slidingDiv">
                                <li>More detailed information can be found on the CASA website XXXXXXX and you can sign up to received updates on the transition to the new regulations. </li>
                            </ul>
                        </li>
                    </ul>

Whole code (Source from browser)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Licencing Regulations</title>
<link href="/_lib/styles/text.css" rel="stylesheet" type="text/css" media="screen, print" />
<link href="/_lib/styles/print.css" rel="stylesheet" type="text/css" media="print" />
<style type="text/css" media="screen"> 
@import url("/_lib/styles/layout_menu.css");
</style>




<!--[if gte IE 5.5]>
<style type="text/css" media="screen">@import url("/_lib/styles/ie.css");</style>
<![endif]-->

<script type="text/javascript"> 

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-8070993-4']);
  _gaq.push(['_setDomainName', 'none']);
  _gaq.push(['_setAllowLinker', true]);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<script type="text/javascript" src="/_lib/scripts/jquery-1.6.4.js"></script> 
</head>

<body id="secLvl">
<div id="bg">
    <div id="wrapper"> 
    <div id="header" class="overflow"> <a href="/index.htm" class="logo">CASA Connect</a>
            <div class="search">
          <form action="http://act01int013/search/search.cgi"  method="get">
          <div class="inputBox">
                <label for="search">search</label>
                <input type="text" name="query" size="20" value="" />
                  <input type="hidden" name="collection" value="casaconnect" />
                 <input type="hidden" name="form" value="simple" />
                </div>
            <input type="image" name="search2" src="/_lib/images/btn_go.gif" class="btn" />
                </form>
                <div class="user"><strong>Hi, <a href="/mylinks/?pagetitle=Licencing Regulations">test site user</a></strong><br />
                20/02/2013 12:12:06</div>
            </div> <!-- end search div -->
        </div> <!-- end header div -->
                <div class="menu">
            <ul>
                <li class="ourOrganisation"><a class="hide" href="/organisation/index.htm">Our Organisation</a> 
                    <ul>
                        <li><a href="/organisation/about/index.htm">About us</a></li>
                        <li><a href="/organisation/messages/index.htm">Director/Deputy Director messages</a></li>
                        <li><a href="/organisation/reports/index.htm">Reports</a></li>
                        <li><a href="/organisation/committees/index.htm">Committees &amp; meetings</a></li>
                    </ul>

                </li>
                <li class="casaSystems"><a class="hide" href="/systems/index.htm">CASA Systems</a>                  
                    <ul>
                        <li><a href="/systems/ess/index.htm">Aurion ESS</a></li>
                        <li><a href="/systems/trim/index.htm">TRIM</a></li>
                        <li><a href="/systems/airs/index.htm">AIRS</a></li>
                        <li><a href="/systems/fmis/index.htm">FMIS (PeopleSoft)</a></li>
                        <li><a href="/systems/fmis/index_new.htm">FMIS (TechOne)</a></li>
                        <li><a href="/systems/eap/index.htm">EAP</a></li>
                        <li><a href="/systems/fcat/index.htm">FCAT</a></li>
                        <li><a href="/working/travel/index.htm">Travel</a></li>
                        <li><a href="/systems/servicelog/timeLOG_help/index.htm">timeLOG</a></li>
                        <li><a href="/systems/bo/index.htm">SAP BusinessObjects</a></li>
                        <li><a href="/yourarea/odas/pmb/services/bcs.htm">How do I ask for a system enhancement?</a></li>
                    </ul>

                </li>
                <li class="staffHandbook"><a class="hide" href="/working/index.htm">Working @ CASA</a>

                    <ul>
                        <li><a href="/working/iwantto/index.htm">I want to know about ...</a></li>
                        <li><a href="/hr/index.htm">Human Resources</a></li>
                        <li><a href="/working/newtocasa/index.htm">New Starters</a></li>
                        <li><a href="/jobs/index.htm">Careers at CASA</a></li>
                        <li><a href="/yourarea/odas/commservices/index.htm">Communication in CASA
</a></li>
                        <li><a href="/working/travel/index.htm">Travel</a></li>
                        <li><a href="/working/property/index.htm">Property &amp; Security</a></li>
                        <li><a href="/working/awards/index.htm">Employee awards</a></li>
                    </ul>

                </li>
                <li class="itInformation"><a class="hide" href="/it/index.htm">IT Centre</a>

                    <ul>
                        <li><a href="/it/general/index.htm">General help</a></li>
                        <li><a href="/it/computers/index.htm">Computers</a></li>
                        <li><a href="/it/email/index.htm">Email</a></li>
                        <li><a href="/it/printers/ricoh/index.htm">Photocopiers/printers</a></li>                        
                        <li><a href="/it/phones/index.htm">Phones</a></li>
                        <li><a href="/it/applications/index.htm">Application Support</a></li>
                        <li><a href="/it/videoconf/index.htm">Video Conference</a></li>
                        <li><a href="/yourarea/isg/web/web.htm">Web content</a></li>
                        <li><a href="/it/unified-comms/unified-communications.htm">Unified Communications</a></li>
                    </ul>

                </li>               <li class="whatsHappening"><a class="hide" href="/happening/index.htm">What's Happening</a>
                    <ul>
                        <li><a href="/happening/clippings/index.htm">Media &amp; Newspaper Clippings</a></li>                   
                        <li><a href="/happening/noticeboard/index.htm">Noticeboard</a></li>
                        <li><a href="/happening/socialclub/index.htm">Social Club</a></li>
                        <li><a href="/happening/holidays.htm">Public holidays</a></li>
                        <li><a href="/happening/newsletters/index.htm">Publications/newsletters</a></li>
                    </ul>

                </li>
                <li class="training"><a class="hide" href="/training/index.htm">Training</a>
                    <ul>
                        <li><a href="/training/courses/schedule.htm">Course Schedule</a></li>
                        <li><a href="/training/class/class.htm">CLASS</a></li>
                        <li><a href="/training/courses/internal.htm">Internal courses</a></li>
                        <li><a href="/training/courses/external.htm">External courses</a></li>
                        <li><a href="/training/leadership.htm">Leadership &amp; Management Development</a></li>
                        <li><a href="/training/reg_tech.htm">Regulatory &amp; technical training</a></li>
                        <li><a href="/training/on-the-job-training.htm">On-the-job Training Program</a></li>
                        <li><a href="/training/policy.htm">Safety Education policies</a></li>                       
                    </ul>

                </li>
                <li class="casawary"><a class="hide" href="/casawary/index.htm">Casawary</a>
                    <ul>
                        <li><a href="/casawary/current/index.htm">Current issue</a></li>
                        <li><a href="/casawary/archive.htm">Past issues</a></li>
                        <li><a href="/casawary/search.htm">Search articles</a></li>
                    </ul>

                </li>
            </ul>
        </div>
<div class="twoColumn">
<p class="breadCrm"><a href="/index.htm">Home</a></p>
<img src="/_lib/images/menu/processes.gif" alt="" width="891" />
<div class="twoColumnRow">
<div class="twoColumnContent">

<div class="contentPad">
<!-- Start of main content -->

<h1>Licencing Regulations</h1>



                    <h2>Key information</h2>
                        <p>Must-know facts</p>
                        <ul class="relatedInfoLinks">
                            <li><a href="http://www.casa.gov.au/scripts/nc.dll?WCMS:STANDARD::pc=PC_101335">Part 61  Flight crew licensing</a>
                                <ul><li class="level2"><a href="http://www.casa.gov.au/scripts/nc.dll?WCMS:STANDARD::pc=PC_101339">Part 61 impact on industry</a></li></ul></li>
                            <li><a href="http://www.casa.gov.au/scripts/nc.dll?WCMS:STANDARD::pc=PC_101336">Part 64  Authorisations for non-licensed personnel</a>
                                <ul><li class="level2"><a href="http://www.casa.gov.au/scripts/nc.dll?WCMS:STANDARD::pc=PC_101340">Part 64 impact on industry</a></li></ul></li>
                            <li><a href="http://www.casa.gov.au/scripts/nc.dll?WCMS:STANDARD::pc=PC_101337">Part 141  Pilot flight training other than certain integrated training</a>
                                <ul><li class="level2"><a href="http://www.casa.gov.au/scripts/nc.dll?WCMS:STANDARD::pc=PC_101341">Part 141 impact on industry</a></li></ul></li>
                            <li><a href="http://www.casa.gov.au/scripts/nc.dll?WCMS:STANDARD::pc=PC_101338">Part 142  Integrated and multi crew pilot flight training</a>
                                <ul><li class="level2"><a href="http://www.casa.gov.au/scripts/nc.dll?WCMS:STANDARD::pc=PC_101342">Part 142 impact on industry</a></li></ul></li>
                        </ul>
                    <h2>Key resources</h2>
                        <ul class="relatedInfoLinks">

                            <li><a href="/junk/cao/doc/FM_bulletin_2_print.pdf">Standards information on the CASA website</a></li>
                            <li><a href="/junk/cao/doc/FM_bulletin_2.pdf">External information on the CASA website </a></li>
                        </ul>

                    <h2>Contact Us</h2>
                        <ul class="relatedInfoLinks">
                            <li><a href="#">Project staff</a></li>
                        </ul>

                    <h2>Must-know facts</h2>
                        <ul class="relatedInfoLinks">
                            <li><a class="drop show_hide" href="#drop">What are the new parts? </a>

                                <ul class="slidingDiv">
                                    <li>CASR Part 61  Flight Crew Licensing requirements</li>
                                    <li>CASR Part 64  Authorisations for non-licenced personnel to operate an aeronautical radio and taxi aircraft.  </li>
                                    <li>CASR Part 141  Pilot flight training other than certain integrated training</li>
                                    <li>CASR Part 142  Integrated and Multi crew pilot flight training </li>
                                </ul>
                            </li>

                            <li><a class="drop show_hide" href="#drop">Where can I find the new regulations?</a>
                                <ul class="slidingDiv">
                                    <li>The Regulations are housed on the Com Law website and can be accessed through links on the CASA home page. </li>
                                </ul>
                            </li>
                            <li><a class="drop show_hide" href="#drop">Why is CASA introducing these new regulations?</a>
                                <ul class="slidingDiv">
                                    <li>align with the International Civil Aviation Organization standards and recommended practices (making licences more transportable for our crews and benefitting local training institutions by attracting foreign pilots to train in Australia),</li>
                                    <li>strengthen licensing and training requirements through the introduction of multi-crew training and flight testing for air transport licences (those required to undertake passenger services) and increased requirements for co-pilots,</li>
                                    <li>improved standards for training organisations with a strong focus on flight activity and aircraft specific competency and the need for greater organisational planning through the requirement for safety and quality assurance systems,</li>
                                    <li>better alignment with modern vocational education and training requirements centred on structured and competency-based training, delivered by competent and qualified instructors and assessed against clearly defined standards, and</li>
                                    <li>address Australian Transport Safety Bureau recommendations through introducing requirements for ratings for low level flying and additional requirements for night time visual flying.</li>
                                </ul>
                            </li>
                            <li><a class="drop show_hide" href="#drop">Is compliance to the regulations required today?</a>
                                <ul class="slidingDiv">
                                <li>The regulations commence on 4 December 2013, therefore no immediate action is required by the aviation industry. </li>

                                <li>During this period CASA will be developing the communication and education material, building processes, amending CASA procedures manuals and developing guidance material (sample expositions, acceptable means of compliance etc.) for use by industry.
                                <ul>
                                    <li>Current flight crew license holders will be transitioned to the new Part 61 licence system over a four year period. </li>

                                    <li>Current flight crew training organisations will be allowed three years to comply fully with the additional requirements of Part 141 and 142.</li>
                                </ul></li>

                                    <li>For existing licence holders the licence they hold on 3 December will still meet the requirements on 4 December.</li>
                                </ul>
                            </li>


                            <li><a class="drop show_hide" href="#drop">What is happening before 4 December?</a>
                                <ul class="slidingDiv">
                                    <li>In the transition period CASA will be further developing the industry advisory material and delivery training and education to key industry members who will be facilitating the implementation and transition.  </li>
                                </ul>
                            </li>
                            <li><a class="drop show_hide" href="#drop">What if I want to know more?  </a>   
                                <ul class="slidingDiv">
                                    <li>More detailed information can be found on the CASA website XXXXXXX and you can sign up to received updates on the transition to the new regulations. </li>
                                </ul>
                            </li>
                        </ul>
<!-- End of main content -->
</div> <!-- end contentPad div -->
</div> <!-- end twocolumncontent div -->
<div class="twoColumnLinks">
<div class="quickLinks">
<h3>Quick Links</h3>
<br />
<ul>
<li><a href="http://ess">Staff Directory</a></li>
<li><a href="/tools/index.htm">Tools of the Trade</a></li>
<li><a href="/forms/index.htm">Forms</a></li>
<li><a href="/guidance/index.htm">Workplace Guidance</a></li>
<li><a href="/yourarea/index.htm">Your Area</a></li>
<li><a href="/offices/index.htm">CASA Offices</a></li>
</ul>
</div>
<div class="myLinkssub">
<h3><strong>My</strong> Links</h3>
<ul>
<li><a href='http://casa.gov.au/'>casa.gov.au</a></li>
<li><a href='/forms/'>Forms</a></li>
<li>Custom link 3</li>
<li>Custom link 4</li>
<li>Custom link 5</li>
<li>Custom link 6</li>
<li>Custom link 7</li>
<li>Custom link 8</li>
</ul>

<a href="/mylinks/?pagetitle=Licencing Regulations" class="addMyLinks">Edit <strong>My</strong> Links</a>
</div>

</div> <!-- end twocolumnlinks div -->
</div> <!-- end twocolumnrow div -->
<script type="text/javascript"> 
$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").hide();
    $(this).parent().next(".slidingDiv").slideToggle();
    });

});
</script>
        </div> <!-- end twocolumn div -->
        <div id="footer">
            <ul>
                <li class="first"><strong>&copy; Copyright 2013 CASA</strong></li>
                <!--<li><a href="/footer/update.htm">CASAconnect updates</a></li>-->
                <li><a href="mailto:[email protected]">[email protected]</a></li>
                <li><a href="/footer/privacy.htm">Privacy Policy</a></li>
                <li class="last"><a href="/footer/sitemap.htm">Site Map</a></li>
            </ul>
        </div> <!-- end footer div -->
    </div> <!-- end wrapper div -->
</div> <!-- end bg div -->

<!--The following jquery code tracks pdf files -->

<script type="text/javascript"> 
jQuery(function()
{
jQuery('a[href$=".pdf"]').click(function()
            { 
             _gaq.push(['_trackEvent', 'Download', 'PDF', this.href]);


            })


});
</script>

</body>





</html>

Upvotes: 1

Views: 14598

Answers (2)

Sparky
Sparky

Reputation: 98718

Your HTML code is invalid:

<a id="drop" class="show_hide" href="#drop">
  ...
<a id="drop" class="show_hide" href="#drop">
  ...

It's most likely not working because you've duplicated the id called drop. Each id must be unique on the page or browser rendering becomes very unpredictable. It also explains why you get no jQuery/JavaScript errors, but nothing works. Duplicate id's are discarded from the DOM and jQuery fails to find elements.

Only use unique id's on the page, or try changing it into a class instead:

<a class="show_hide drop" href="#drop"> ...

Working Demo: http://jsfiddle.net/yfa32/

EDIT:

Your HTML is still invalid and that's causing jQuery DOM traversal to fail in Explorer...

<ul class="relatedInfoLinks">
    <li>...</li>
    <div class="slidingDiv"> ... </div>
    <li>...</li>
    <div class="slidingDiv"> ... </div>
</ul>

You cannot have a <div> as immediate descendants of <ul>... as per the spec, only <li> can be immediate descendants of a <ul>. Change these div's into li's.

Newly updated jsFiddle: http://jsfiddle.net/yfa32/1/

Validated HTML is step 1 before chasing any cross-browser issues, especially Explorer issues.

EDIT 2:

Since fixing all HTML validation errors have not solved the OP's problem, I think the .toggle() is trying to open and then immediately closes the element due to interference from the preceding .hide().

Anyway, refactoring the code makes a little more sense and it operates more smoothly without any of the previous blinking. I use a .not() to exclude the current target of the click which leaves that part up to the .toggle() to fully evaluate.

I use something very similar myself and it works fine in Explorer...

$(document).ready(function () {

    $(".slidingDiv").hide();

    $('.show_hide').click(function () {
        var ele = $(this).parent().next('.slidingDiv'); //<-- this is the target
        $('.slidingDiv').not(ele).slideUp(); //<-- closes everything else except the target
        ele.slideToggle(); //<-- toggles the target
    });

});

Demo: http://jsfiddle.net/yfa32/6/

Upvotes: 4

Head
Head

Reputation: 568

Make sure you're including your: http://code.jquery.com/jquery-latest.js

 <!DOCTYPE html><html><head>  <style>  div { background:#def3ca; margin:3px; width:80px;  display:none; float:left; text-align:center; }  </style>  <script src="http://code.jquery.com/jquery-latest.js"></script></head><body>   <button id="showr">Show</button>  <button id="hidr">Hide</button>  <div>Hello 3,</div>   <div>how</div>  <div>are</div>  <div>you?</div><script>$("#showr").click(function () {  $("div").first().show("fast", function showNext() {    $(this).next("div").show("fast", showNext);  });}); $("#hidr").click(function () {  $("div").hide(1000);});</script> </body></html>

Test it here:

http://api.jquery.com/show/

Upvotes: 1

Related Questions