Avatar of Redcurb
Redcurb
 asked on

Animated Collapsible DIV IE Browser compatibility issue

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

Web Languages and StandardsCSSJavaScript

Avatar of undefined
Last Comment
abbasi1

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
DT20Three

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
abbasi1

may be this file would give you some help...
4.htm
abbasi1

it works in IE 6
Your help has saved me hundreds of hours of internet surfing.
fblack61