We help IT Professionals succeed at work.
Get Started

Animated Collapsible DIV IE Browser compatibility issue

712 Views
Last Modified: 2013-11-19
I used a popular script from the following site which was supposed to be fully browser compatible on my website for my search page (see code and link)

This is where we got the code form originally:
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm


In FireFox everything works fine but in IE only the last section will open when clicked. All other sections (or tabs) open for a spit second and instantly close again.

We are at our whits end on this one and really need a solution fast for our client otherwise we look really bad as you can imagine when we open up the site in IE and it does not work!

We've created a test page here for you to see the exact issue, also attached is all code we used to create this function. You can see what we are talking about here:
http://bit.ly/cRtkgB

Could you please let us know what to change in our code to make this work properly in IE so that all tabs can be opened at one time (like they do in firefox)?

Thank you.
<!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=UTF-8" />
<title>Untitled Document</title>
</head>
<script>
    function consultantContact(act, form) {
        //var form = document.getElementById("businessProfileForm");
//        form.action_name.value = act;
        form.submit();
    }
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="animatedcollapse.js">

</script>

<script type="text/javascript">

animatedcollapse.addDiv('business-school', 'fade=1,height=220px')
animatedcollapse.addDiv('personal-info', 'fade=1,height=200px')
animatedcollapse.addDiv('experience', 'fade=1,height=310px')
animatedcollapse.addDiv('interests', 'fade=1,height=250px')
animatedcollapse.addDiv('preferences', 'fade=1,height=160px')

animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
}

animatedcollapse.init()

</script>

<body>


<div id="main-content">
    <div id="header-spacer1"></div>
    
    <!--       begin of searchForm        -->
<form enctype="multipart/form-data"  action="{$config.web_location}/index.php"  method="post" name="searchForm" id="searchForm">
    <input type="hidden" name="p" value="{$p}">
    <input type="hidden" name="action" value="search">
         <div id="accordion-holder">  	

            <div style="width: 900px; height:175px; background-color:#E3F1F4;">
            	<table width="960" cellpadding="10" cellspacing="10" class="search-personal-information search-headings">
                    <tr>
                        <td>
                        <label>Keyword Search<br />
                          <input type="text" size="50" name="keyword" value="{$typeData.keyword}" id="keyword" />
                        </label><br /><br />
                        </td>
                      <td>
            
                        <label>Project Format <br />
                            <select name="project_format" id="project_format" size="7" multiple="multiple" >
                                <option>Valuation</option>
                                <option>Marketing</option>
                                <option>Finance</option>
                         </select>
                        </label>
                      </td>
                      <td>
            
                        <label>Industry <br />
                            <select name="industry" id="industry" size="7" multiple="multiple" >
                                <option>Industry 1</option>
                                <option>Industry 2</option>
                                <option>Industry 3</option>
                         </select>
                        </label>
                      </td>
                    </tr>
                </table>
            </div>

            
            <a class="search-category-buttons" href="javascript:animatedcollapse.toggle('business-school')">Business School &darr;</a>
            
            <div id="business-school" style="width: 900px; background: #E3F1F4; display:none">
            <table cellpadding="10" cellspacing="10" class="search-business-school search-headings">
                    <tr>
                        <td>
                        Test<br />
                        <select  name="mba_school" size="10" multiple="multiple">
                            <option value=""></option>
                            <option value="Harvard University" {if $typeData.organization_affiliation == "Harvard University"}selected{/if}>Harvard University</option>
                            <option value="Columbia University" {if $typeData.organization_affiliation == "Columbia University"}selected{/if}>Columbia University</option>
                            <option value="Cornell University" {if $typeData.organization_affiliation == "Cornell University"}selected{/if}>Cornell University</option>
                          </select>
                        </td>
                      <td>
                       test
                      </td>
                    </tr>
              </table>
            </div>
        
            <a class="search-category-buttons" href="javascript:animatedcollapse.toggle('personal-info')">Personal Information &darr;</a>
            <div id="personal-info" style="width: 900px; background: #E3F1F4; display:none">
            <table cellpadding="10" cellspacing="10" class="search-personal-information search-headings">
                    <tr>
                        <td valign="top">
                        <label>Name<br />
                          <input type="text" name="name" id="name" />
                        </label><br /><br />
                        <label>Email<br />
                          <input type="text" name="email" value = "{$typeData.email}" id="Email" />
                        </label><br /><br />
                        </td>
                        <td valign="top">
                        <!--Populate from whatever is a city -->
                        <label>City<br />
                          <input type="text" name="city" value = "{$typeData.city}" id="City" />
                        </label><br /><br />
                           
                        </td>
                        <td valign="top">
                        <label>Country<br />
                        <select name="country" id="Country" >
                            <option value=""></option>
                            {foreach from=$countryData item=data key=idx}
                                <option value="{$data.c_name}" {if $typeData.country == $data.c_name}selected{/if}>{$data.c_name}</option>
                            {/foreach}
                       </select>
                       </label><br /><br />
                        <label>Languages Spoken<br />
                        <select name="Language" id="Language" >
                            <option>English</option>
                            <option>Spanish</option>
                            <option>French</option>
                         </select>
                         </label>
                        
                       </td>
                    </tr>
            </table>
            </div>
            
            <a class="search-category-buttons" href="javascript:animatedcollapse.toggle('experience')">Experience &darr;</a>
            
            <div id="experience" style="width: 900px; background: #E3F1F4; display:none">
            <table cellpadding="10" cellspacing="10" class="search-experience search-headings">
                    <tr>
                        <td valign="top">
                       <label>Industry of Experience 1<br />
                            <select name="industry_of_experience1" id="industry_of_experience1" size="10" multiple="multiple" >
                                <option value=""></option>
                                <option value="Option 1" {if $typeData.industry_of_experience1 == "Option 1"}selected{/if}>Option 1</option>
                                <option value="Option 2" {if $typeData.industry_of_experience1 == "Option 2"}selected{/if}>Option 2</option>
                                <option value="Option 3" {if $typeData.industry_of_experience1 == "Option 3"}selected{/if}>Option 3</option>
                         </select>
                        </label>
                        </td>
                        <td valign="top">
                        <label>Job Function of Experience 1<br />
                            <select name="job_function_of_experience1" id="job_function_of_experience1" size="10" multiple="multiple" >
                                <option value=""></option>
                                <option value="Option 1" {if $typeData.job_function_of_experience1 == "Option 1"}selected{/if}>Option 1</option>
                                <option value="Option 2" {if $typeData.job_function_of_experience1 == "Option 2"}selected{/if}>Option 2</option>
                                <option value="Option 3" {if $typeData.job_function_of_experience1 == "Option 3"}selected{/if}>Option 3</option>
                          </select>
                        </label>
                        </td>
                        <td valign="top">
                        <label>Region of Experience<br />
                            <select name="Region of Experience" id="Region of Experience" size="10" multiple="multiple" >
                                <option>Europe</option>
                                <option>MENA</option>
                                <option>Africa</option>
                                <option>Asia</option>
                          </select>
                        </label><br /><br />
                        </td>
                      <td valign="top">
                          <label>City of Experience<br />
                          <input type="text" name="City" id="City" />
                        </label>
                        <br />
                        <br />
                        <label>State of Experience<br />
                      
                        </label>
                        <br />
                        <br />
                        <label>Country<br />
                        <select name="country1" id="country" >
                            <option value=""></option>
                            {foreach from=$countryData item=data key=idx}
                                <option value="{$data.c_name}" {if $typeData.country1 == $data.c_name}selected{/if}>{$data.c_name}</option>
                            {/foreach}
                       </select>
                       </label>
                        <br />
                        <br />
                       <label>Previous Companies <br />
                         <input type="text" name="Previous Companies" id="Previous Companies" />
                        </label><br /><br />
                      </td>
                    </tr>
              </table>
            </div>
            
            <a class="search-category-buttons" href="javascript:animatedcollapse.toggle('interests')">Interests &darr;</a>
            
            <div id="interests" style="width: 900px; background: #E3F1F4; display:none">
            <table cellpadding="10" cellspacing="10" class="search-experience search-headings">
                    <tr>
                        <td valign="top">
                       <label>Industry of Interests 1<br />
                            <select name="industry_of_interest1" id="industry_of_interest1" size="10" multiple="multiple" >
                                <option value=""></option>
                                <option value="Option 1" {if $typeData.industry_of_interest1 == "Option 1"}selected{/if}>Option 1</option>
                                <option value="Option 2" {if $typeData.industry_of_interest1 == "Option 2"}selected{/if}>Option 2</option>
                                <option value="Option 3" {if $typeData.industry_of_interest1 == "Option 3"}selected{/if}>Option 3</option>
                         </select>
                        </label>
                        </td>
                        <td valign="top">
                        <label>Job Function of Interests 1<br />
                            <select name="job_function_of_interest1" id="job_function_of_interest1" size="10" multiple="multiple" >
                                <option value=""></option>
                                <option value="Option 1" {if $typeData.job_function_of_interest1 == "Option 1"}selected{/if}>Option 1</option>
                                <option value="Option 2" {if $typeData.job_function_of_interest1 == "Option 2"}selected{/if}>Option 2</option>
                                <option value="Option 3" {if $typeData.job_function_of_interest1 == "Option 3"}selected{/if}>Option 3</option>
                          </select>
                        </label>
                        </td>
                        <td valign="top">
                        <label>Region of Interests<br />
                            <select name="Region of Interests" id="Region of Interests" size="10" multiple="multiple" >
                                <option>Europe</option>
                                <option>MENA</option>
                                <option>Africa</option>
                                <option>Asia</option>
                          </select>
                        </label><br /><br />
                        </td>
                      <td valign="top">
                          <label>City of Interests<br />
                          <input type="text" name="city1" value="{$typeData.city1}" id="City" />
                        </label>
                        <br />
                        <br />
                        <label>State of Interests<br />
                       
                        </label>
                        <br />
                        <br />
                        <label>Country<br />
                        <select name="country2" id="country" >
                            <option value=""></option>
                            {foreach from=$countryData item=data key=idx}
                                <option value="{$data.c_name}" {if $typeData.country2 == $data.c_name}selected{/if}>{$data.c_name}</option>
                            {/foreach}
                       </select>
                       </label><br /><br />
                      </td>
                    </tr>
              </table>
            </div>
            
            <a class="search-category-buttons" href="javascript:animatedcollapse.toggle('preferences')">Preferences &darr;</a>
            
            <div id="preferences" style="width: 900px; background: #E3F1F4; display:none">
            <table cellpadding="10" cellspacing="10" class="search-preferences search-headings">
                <tr>
                    <td valign="top">Hours want to work per week 
                        <select name="hours_you_want">
                            <option value=""></option>
                            <option value="1-4" {if $typeData.hours_you_want == "1-4"}selected{/if}>1-4</option>
                            <option value="4-8" {if $typeData.hours_you_want == "4-8"}selected{/if}>4-8</option>
                            <option value="8+" {if $typeData.hours_you_want == "8+"}selected{/if}>8+</option>
                        </select>
                    </td>
                    <td valign="top">
                        <label>Project type preference 1<br />
                            <select name="project_type_preference1" id="project_type_preference1" size="3" multiple="multiple" >
                                <option value=""></option>
                                <option value="One-To-One" {if $typeData.project_type_preference1 == "One-To-One"}selected{/if}>One-To-One</option>
                                <option value="Team" {if $typeData.project_type_preference1 == "Team"}selected{/if}>Team</option>
                                <option value="Competition" {if $typeData.project_type_preference1 == "Competition"}selected{/if}>Competition</option>
                          </select>
                        </label>
                   </td>
                   <td valign="top">Previous Education 1<br /> <input name="previous_education1" value="{$typeData.previous_education1}" type="text" size="25" /></td>
                </tr>
            </table>
            </div>
        
        
      </div> 
    <input name="search" type="submit" value="Search"  /><br /><br />
   

    </form>
</body>
</html>

Open in new window

Comment
Watch Question
This problem has been solved!
Unlock 1 Answer and 3 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE