Link to home
Start Free TrialLog in
Avatar of Stanton_Roux
Stanton_RouxFlag for South Africa

asked on

Jquery Toggle problem

Hi There
I am trying to toggle a div but I am havving problems as the event is not firing
I am not sure what I am doing wrong.
Thanks stanton
asp.net code
<div class="finDetailToggleBG padding4px">
                            <div class="floatRight">
                                <a href="javascript:;" id="a1">
                                    <img src="images/arrowToggleGrey.gif" id="tog1"  /></a></div>
                            View Colour and Accessories Options</div>
                            <div class="padding4px none" id="life">
                                <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" RenderMode="Inline">
                                    <ContentTemplate>
                                        <uc1:FinanceColourSelector ID="FinanceColourSelector1" runat="server" />
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
                                    </Triggers>
                                </asp:UpdatePanel>
                            </div>

Jquery.js file

 $("a#a1").click().toggle(function() {
        $("img#tog1").attr("src", $("img#tog1").attr("src").split("Grey.").join("Red."));
        $("div#life").toggle();
    }, function() {
        $("img#tog1").attr("src", $("img#tog1").attr("src").split("Red.").join("Grey."));
        $("div#life").toggle();
    });

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of waltersnowslinarnold
waltersnowslinarnold
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Stanton_Roux

ASKER

Yes I have it in the master page and I tried putting it in the usercontrol itself.
This was working at one stage and suddenly stopped is there anything that would cuase this to suddenly stop working.
can you attach the files here....

1st step, you can also put alerts and see if the call is going the function, onclick, if not obviously the reference to js files are not working..
I did put an alert but the alert was not firing.So it must be the refernce is not working what would be the cause of that?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
There are no errors on the page I am testing in IE8.
I tried clearing the cash aswell.
ASCX page
<%@ Control Language="C#" AutoEventWireup="true" Inherits="Controls_FinanceCalculatorModelRangeSelector"
    CodeBehind="FinanceCalculatorModelRangeSelector.ascx.cs" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%@ Register Src="~/Controls/FinanceColourSelector.ascx" TagName="FinanceColourSelector"
    TagPrefix="uc1" %>
<%@ Register Src="FinanceSelectedVehicleAccessories.ascx" TagName="FinanceSelectedVehicleAccessories"
    TagPrefix="uc2" %>
<%@ Register Src="MaintenanceAndServicingCalculators.ascx" TagName="MaintenanceAndServicingCalculators"
    TagPrefix="uc3" %>
<%@ Register Src="FinanceCalculator.ascx" TagName="FinanceCalculator" TagPrefix="uc4" %>
<%@ Register Src="FinanceMaintenanceAndServicingCalculators.ascx" TagName="FinanceMaintenanceAndServicingCalculators"
    TagPrefix="uc5" %>
<%@ Register Src="SelectDerivativeAndKmForServiceOrMaintenance.ascx" TagName="SelectDerivativeAndKmForServiceOrMaintenance"
    TagPrefix="uc6" %>

<script type="text/javascript">
//var zxcMaxYScroll=500;

//function zxcStopScroll()
//{
//    window.scroll(0,0); 
//}

//var StopScrolling = "";

//if(StopScrolling = 1)
//{
//    window.onscroll=zxcStopScroll
//}

<!--
    /***********************************************
    * IFrame SSI script II-  Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
    * Visit DynamicDrive.com for hundreds of original DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/

    //Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
    //Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
    var iframeids = ["Models"]

    //Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
    var iframehide = "yes"

    var getFFVersion = navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
    var FFextraHeight = parseFloat(getFFVersion) >= 0.1 ? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

    function resizeCaller() {
        var dyniframe = new Array()
        for (i = 0; i < iframeids.length; i++) {
            if (document.getElementById)
                resizeIframe(iframeids[i])
            //reveal iframe for lower end browsers? (see var above):
            if ((document.all || document.getElementById) && iframehide == "no") {
                var tempobj = document.all ? document.all[iframeids[i]] : document.getElementById(iframeids[i])
                tempobj.style.display = "block"
            }
        }
    }

    function resizeIframe(frameid) {
        var currentfr = document.getElementById(frameid)
        if (currentfr && !window.opera) {
            currentfr.style.display = "block"
            if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
                currentfr.height = currentfr.contentDocument.body.offsetHeight + FFextraHeight;
            else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
                currentfr.height = currentfr.Document.body.scrollHeight;
            if (currentfr.addEventListener)
                currentfr.addEventListener("load", readjustIframe, false)
            else if (currentfr.attachEvent) {
                currentfr.detachEvent("onload", readjustIframe) // Bug fix line
                currentfr.attachEvent("onload", readjustIframe)
            }
        }
    }

    function readjustIframe(loadevt) {
        var crossevt = (window.event) ? event : loadevt
        var iframeroot = (crossevt.currentTarget) ? crossevt.currentTarget : crossevt.srcElement
        if (iframeroot)
            resizeIframe(iframeroot.id);
    }

    function loadintoIframe(iframeid, url) {
        if (document.getElementById)
            document.getElementById(iframeid).src = url
    }

    if (window.addEventListener)
        window.addEventListener("load", resizeCaller, false)
    else if (window.attachEvent)
        window.attachEvent("onload", resizeCaller)
    else
        window.onload = resizeCaller

    function MM_preloadImages() { //v3.0
        var d = document; if (d.images) {
            if (!d.MM_p) d.MM_p = new Array();
            var i, j = d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i < a.length; i++)
                if (a[i].indexOf("#") != 0) { d.MM_p[j] = new Image; d.MM_p[j++].src = a[i]; }
        }
    }
//-->
</script>

<asp:Panel ID="pnlServiceAndMaintenance" runat="server">
    <div class="contentBorBG">
    <asp:Panel ID="pnlCalcHeader" runat="server" Visible="false"> 
        <div class="serviceMainHead toyota">Monthly Instalment Calculator</div>
    </asp:Panel>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td class="padding10px" valign="top"><h4>Select your model to calculate Toyota Instalment Finance</h4></td>
            <td class="padding10px rightAlign width390">
                <asp:RadioButtonList ID="rblVehicleSelector" runat="server" RepeatDirection="Horizontal" AutoPostBack="true" OnSelectedIndexChanged="rblVehicleSelector_SelectedIndexChanged">
                    <%--<asp:ListItem>Passenger</asp:ListItem>
                    <asp:ListItem>4x4 and SUVs</asp:ListItem>
                    <asp:ListItem>Commercial</asp:ListItem>--%>
                </asp:RadioButtonList>
                <telerik:RadComboBox ID="ddnVehicleRanges" runat="server" Skin="Default" Height="140px"
                    Width="150px" OnClientSelectedIndexChanging="LoadRanges" EnableLoadOnDemand="true">
                </telerik:RadComboBox>
                <telerik:RadComboBox ID="ddnVehicleModels" runat="server" Skin="Default" Height="140px"
                    Width="150px" OnClientItemsRequested="ItemsLoaded" OnItemsRequested="ddnVehicleModels_ItemsRequested"
                    EnableLoadOnDemand="true" OnSelectedIndexChanged="ddnVehicleModels_SelectedIndexChanged"
                    AutoPostBack="true">
                </telerik:RadComboBox>
                <asp:ImageButton ID="cmdNext" ImageUrl="~/images/buttons/btnNext.png" ImageAlign="Middle" 
                    runat="server" onclick="cmdNext_Click" />
                <asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup"
                    BackColor="White" Width="800" Height="600">
                    <div>
                        <asp:Panel ID="Panel2" runat="server">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td class="modelHead">
                                        <asp:ImageButton ID="cmdCancel" Text="Cancel" runat="server" ImageUrl="~/images/buttons/btnClose.png"
                                            align="right" ImageAlign="Right" />
                                        <asp:Label ID="lblTitle" runat="server"></asp:Label>
                                    </td>
                                </tr>
                            </table>
                        </asp:Panel>
                    </div>
                    <div>
                        <%= ModalURL%>
                    </div>
                </asp:Panel>
                <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none" />
                <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="hiddenTargetControlForModalPopup"
                    PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="false"
                    PopupDragHandleControlID="Panel1" Drag="true" CancelControlID="cmdCancel" /><br />
                    <asp:LinkButton ID="lblNeedHelp" runat="server" OnClick="lblNeedHelp_Click"
                    OnClientClick="return CheckSelectedCount(this);"><span class="toyota">Need help?</span> 
                    Try the model chooser <asp:Image ImageUrl="~/images/arrow_on.png" runat="server" /></asp:LinkButton>
            </td>
        </tr>
    </table>
    <asp:Panel ID="pnlCalcBody" runat="server" Visible="false">
    <div class="modelHeadBG">Car Name and Range</div>
    <table width="100%" class="table" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td valign="top">
<%--                <asp:HyperLink ID="HyperLink1" NavigateUrl="~/trolley.aspx" runat="server" CssClass="marginRight10px"
                    ImageUrl="~/images/buttons/btnBacktoTrolley.png"></asp:HyperLink><br />
--%>                <br />
                <div align="center" class="padding10px">
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="Inline">
                        <ContentTemplate>
                            <asp:Image ID="imgModel" runat="server" Height="119" />
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
                        </Triggers>
                    </asp:UpdatePanel>
                </div>
                <br />
                <%--<ul class="btmModelNav">
                    <li>Finance Product: </li>
                    <li><a href="#">Installment Finance</a></li><li><a href="#">Lease Finance</a></li></ul>
                <br />--%>
                <uc4:FinanceCalculator ID="FinanceCalculator1" runat="server" />
            </td>
            <td valign="top" style="width: 439px; background-color: #f8f8f8;">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td><div class="finDetailToggleBG padding4px">
                            <div class="floatRight">
                                <a href="javascript:;" id="a1">
                                    <img src="images/arrowToggleGrey.gif" id="tog1"  /></a></div>
                            View Colour and Accessories Options</div>
                            <div class="padding4px none" id="life">
                                <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" RenderMode="Inline">
                                    <ContentTemplate>
                                        <uc1:FinanceColourSelector ID="FinanceColourSelector1" runat="server" />
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
                                    </Triggers>
                                </asp:UpdatePanel>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td><div class="finDetailToggleBG padding4px">
                            <div class="floatRight">
                                <a href="javascript:;" id="a2">
                                    <img src="images/arrowToggleGrey.gif" id="tog2" /></a></div>
                            Dealer Options/Accessories</div>
                            <div class="padding4px none" id="cost">
                                <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional" RenderMode="Inline">
                                    <ContentTemplate>
                                        <uc2:FinanceSelectedVehicleAccessories ID="FinanceSelectedVehicleAccessories1" runat="server" />
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
                                    </Triggers>
                                </asp:UpdatePanel>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td><div class="finDetailToggleBG padding4px">
                            <div class="floatRight">
                                <a href="javascript:;" id="a3">
                                    <img src="images/arrowToggleGrey.gif" id="tog3" /></a></div>
                            Service and Maintenance Options</div>
                            <div class="padding4px none" id="body">
                                <%--<uc3:MaintenanceAndServicingCalculators ID="MaintenanceAndServicingCalculators1" runat="server" />--%>
                                <asp:UpdatePanel ID="UpdatePanel5" runat="server" UpdateMode="Conditional" RenderMode="Inline">
                                    <ContentTemplate>
                                        <%--<uc5:FinanceMaintenanceAndServicingCalculators ID="FinanceMaintenanceAndServicingCalculators1"
                                            runat="server" />--%>
                                            <%--<strong><h3>Service<h3/></strong><br/><br/>--%>
                                        <uc6:SelectDerivativeAndKmForServiceOrMaintenance ID="SelectDerivativeAndKmForServiceOrMaintenance1" runat="server" />
                                        <%--<hr />
                                        <strong><h3>Maintenance<h3/></strong><br/><br/>--%>
                                        <uc6:SelectDerivativeAndKmForServiceOrMaintenance ID="SelectDerivativeAndKmForServiceOrMaintenance2" runat="server"/>
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
                                    </Triggers>
                                </asp:UpdatePanel>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="right" class="padding4px">
                            <asp:UpdatePanel ID="upTrolleyTotalCost" runat="server" UpdateMode="Conditional"
                                RenderMode="Inline">
                                <ContentTemplate>
                                    <div class="price">
                                        R<asp:Label ID="lbTrolleyTotalCost" runat="server"><%=LoadTrolleyTotalCost()%></asp:Label>
                                        <asp:HiddenField ID="hfTrolleyExtrasCost" runat="server" />
                                        <asp:HiddenField ID="hfVehicleCost" runat="server" />
                                    </div>
                                </ContentTemplate>
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
                                </Triggers>
                            </asp:UpdatePanel>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <div class="darkBG padding10px">
    <div class="darkBG padding6px">
    CALCULATION RESULTS</div>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="whiteBG padding10px table">
        <tr>
            <td valign="top" class="padding6px">
                <table border="0" cellpadding="0" cellspacing="0" width="300">
                    <tr>
                        <td align="right" class="padding6px" width="150">
                            ESTIMATED PURCHASE PRICE:
                        </td>
                        <td>
                            <div class="price2">
                                R<asp:Label ID="lblTotalAmount" runat="server" Text="0"></asp:Label>
                                <asp:HiddenField ID="hfTotalAmount" runat="server" />
                            </div>
                        </td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td align="right" class="padding6px">
                            MONTHLY INSTALLMENT:
                        </td>
                        <td>
                            <div class="price2">
                                R<asp:Label ID="lbTotalPerMonth" runat="server" Text="0"></asp:Label>
                                <asp:HiddenField ID="hfTotalPerMonth" runat="server" />
                            </div>
                        </td>
                        <td class="toyota">&nbsp;*</td>
                    </tr>
                </table>
            </td>
            <td class="padding6px" width="122">
                <asp:ImageButton ID="btnAdd" runat="server" ImageUrl="~/images/buttons/btnAddTrolleyFinance.jpg"
                    OnClick="btnAdd_Click" />
            </td>
            <td class="padding6px" width="122">
                <asp:HyperLink ID="HyperLink10" ImageUrl="~/images/buttons/btnPrintYourCalculation.jpg"
                    Target="_blank" NavigateUrl="~/PrintFinanceCalculator.aspx" runat="server"></asp:HyperLink>
            </td>
        </tr>
    </table>
    <div class="toyota padding6px">
        * Initiation Fee and Monthly Administration fee included.
    </div>
    </div>
    </div>
    <asp:Image ID="Image1" ImageUrl="~/images/footer_872.png" runat="server" />
    <div class="alertBGFin marginTop6px">
        Disclaimer<br />
        All calculations made on calculators supplied on this site, together with rates quoted, are guidelines only and are subject to confirmation at the time of finalising any transactions. All information regarding the products, fees, interest and/or costs which are included in and form a fundamental basis of the calculations are subject to change at any time prior to a final pre-agreement quote being handed to the User. The User indemnifies Toyota Financial Services against any loss or liability, which the User may suffer as a result of the use of any calculator. The site and all information provided on this site and the services provided on this site, are provided "as is". The information provided on this site should not be treated as professional advice of any kind.
    </div>
    </asp:Panel>
</asp:Panel>

<script type="text/javascript">

    function LoadRanges(combo, eventarqs) {
        var areaCombo = $find("<%=ddnVehicleModels.ClientID%>");
        var item = eventarqs.get_item();
        areaCombo.set_text("Loading...");

        if (item.get_index() > 0) {
            areaCombo.requestItems(item.get_value(), false);
        }
        else {
            areaCombo.set_text(" ");
            areaCombo.clearItems();
        }
    }

    function ItemsLoaded(combo, eventarqs) {
        var areaCombo = $find("<%=ddnVehicleModels.ClientID%>");
        if (combo.get_items().get_count() > 0) {
            combo.set_text(combo.get_items().getItem(0).get_text());
            combo.get_items().getItem(0).highlight();
        }
        combo.showDropDown();
    }

    function SetUniqueRadioButton(nameregex, current) {
        re = new RegExp(nameregex);
        for (i = 0; i < document.forms[0].elements.length; i++) {
            elm = document.forms[0].elements[i]
            if (elm.type == 'radio') {
                if (re.test(elm.name)) {
                    elm.checked = false;
                }
            }
        }
        current.checked = true;
    }
</script>

<script type="text/javascript">

    function CheckSelectedCount(cmdHelpChoose) {

        var objVehicleRangeControl;
        objVehicleRangeControl = document.getElementById('<%=ddnVehicleRanges.ClientID%>');
        //        alert((objVehicleRangeControl.value).toLowerCase().replace(new RegExp(/ /g), "").replace(new RegExp(/-/g), ""))

        if ((objVehicleRangeControl.value).toLowerCase().replace(new RegExp(/ /g), "").replace(new RegExp(/-/g), "") != "selectarange") {
            return true;
        }
        else {
            alert("Please select a range...");
            return false;
        }

    }
    


</script>

Jscript file

/* JavaScript File */

$(document).ready(function() {
    // apply to all png images
    //$('img[@src$=.png]').ifixpng();

    $("div.myToyotaOverlay").hide();
    $("div#login").hide();
    $("div#quicklinks").hide();
    ///$("input.rcbInput").attr("disabled", "disabled");

    /* Toyota Owners Overlay */
    $("img.owners").toggle(function() {
        $("img.owners").attr("src", $("img.owners").attr("src").split("off.").join("on."));
        $("div.myToyotaOverlay").slideDown();
    }, function() {
        $("img.owners").attr("src", $("img.owners").attr("src").split("on.").join("off."));
        $("div.myToyotaOverlay").slideUp();
    });

    /* Close Button Toyota Owners Overlay */
    $(".close").click(function() {
        $("div.myToyotaOverlay").slideUp();
        $("img.owners").attr("src", $("img.owners").attr("src").split("on.").join("off."));
    });

    /* Quicklinks Menu */
    function showQuick() {
        $("img.quick").attr("src", $("img.quick").attr("src").split("off.").join("on."));
        $("div.quicklinks").slideDown();
    }

    function hideQuick() {
        $("img.quick").attr("src", $("img.quick").attr("src").split("on.").join("off."));
        $("div.quicklinks").slideUp();
    }

    var configQuick = {
        sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
        interval: 200, // number = milliseconds for onMouseOver polling interval
        over: showQuick, // function = onMouseOver callback (REQUIRED)    
        timeout: 500, // number = milliseconds delay before onMouseOut
        out: hideQuick // function = onMouseOut callback (REQUIRED)
    };

    $("div#dropQuicklinks").hoverIntent(configQuick);

    /* My Toyota Menu */
    function showMyToyota() {
        $("img.myToyotaBtn").attr("src", $("img.myToyotaBtn").attr("src").split("off.").join("on."));
        $("div.myToyota").slideDown();
    }

    function hideMyToyota() {
        $("img.myToyotaBtn").attr("src", $("img.myToyotaBtn").attr("src").split("on.").join("off."));
        $("div.myToyota").slideUp();
    }

    var configQuick = {
        sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
        interval: 200, // number = milliseconds for onMouseOver polling interval
        over: showMyToyota, // function = onMouseOver callback (REQUIRED)    
        timeout: 500, // number = milliseconds delay before onMouseOut
        out: hideMyToyota // function = onMouseOut callback (REQUIRED)
    };

    $("div#dropMyToyota").hoverIntent(configQuick);

    /* Tooltip */
    $("img.qtip").hover(function() {
        $(this).attr("src", $(this).attr("src").split("off.").join("on."));
    }, function() {
        $(this).attr("src", $(this).attr("src").split("on.").join("off."));
    });

    /* Arrows */

    $("a.arr").hover(function() {
        $("img.arrC").attr("src", $("img.arrC").attr("src").split("arrowRedRight.").join("arrowGreyRight."));
    }, function() {
        $("img.arrC").attr("src", $("img.arrC").attr("src").split("arrowGreyRight.").join("arrowRedRight."));
    });

    $("a#a1").click().toggle(function() {
        $("img#tog1").attr("src", $("img#tog1").attr("src").split("Grey.").join("Red."));
        $("div#life").toggle();
    }, function() {
        $("img#tog1").attr("src", $("img#tog1").attr("src").split("Red.").join("Grey."));
        $("div#life").toggle();
    });

    $("a#a2").click().toggle(function() {
        $("img#tog2").attr("src", $("img#tog2").attr("src").split("Grey.").join("Red."));
        $("div#cost").toggle();
    }, function() {
        $("img#tog2").attr("src", $("img#tog2").attr("src").split("Red.").join("Grey."));
        $("div#cost").toggle();
    });

    $("a#a3").click().toggle(function() {
        $("img#tog3").attr("src", $("img#tog3").attr("src").split("Grey.").join("Red."));
        $("div#body").toggle();
    }, function() {
        $("img#tog3").attr("src", $("img#tog3").attr("src").split("Red.").join("Grey."));
        $("div#body").toggle();
    });

    $(".segMentBG").hide();

    $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl01_h1").toggle(function() {
        $(this).removeClass("segMentBtn");
        $(this).addClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl01_pnlDescriptionWithStyling").show();
    }, function() {
        $(this).addClass("segMentBtn");
        $(this).removeClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl01_pnlDescriptionWithStyling").hide();
    });

    $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl02_h1").toggle(function() {
        $(this).removeClass("segMentBtn");
        $(this).addClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl02_pnlDescriptionWithStyling").show();
    }, function() {
        $(this).addClass("segMentBtn");
        $(this).removeClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl02_pnlDescriptionWithStyling").hide();
    });

    $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl03_h1").toggle(function() {
        $(this).removeClass("segMentBtn");
        $(this).addClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl03_pnlDescriptionWithStyling").show();
    }, function() {
        $(this).addClass("segMentBtn");
        $(this).removeClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl03_pnlDescriptionWithStyling").hide();
    });

    $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation2_ctl01_h1").toggle(function() {
        $(this).removeClass("segMentBtn");
        $(this).addClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation2_ctl01_pnlDescriptionWithStyling").show();
    }, function() {
        $(this).addClass("segMentBtn");
        $(this).removeClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation2_ctl01_pnlDescriptionWithStyling").hide();
    });

    $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation2_ctl02_h1").toggle(function() {
        $(this).removeClass("segMentBtn");
        $(this).addClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation2_ctl02_pnlDescriptionWithStyling").show();
    }, function() {
        $(this).addClass("segMentBtn");
        $(this).removeClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation2_ctl02_pnlDescriptionWithStyling").hide();
    });
    $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl01_h1").toggle(function() {
        $(this).removeClass("segMentBtn");
        $(this).addClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl01_pnlDescriptionWithStyling").show();
    }, function() {
        $(this).addClass("segMentBtn");
        $(this).removeClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl01_pnlDescriptionWithStyling").hide();
    });
    $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl02_h1").toggle(function() {
        $(this).removeClass("segMentBtn");
        $(this).addClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl02_pnlDescriptionWithStyling").show();
    }, function() {
        $(this).addClass("segMentBtn");
        $(this).removeClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl02_pnlDescriptionWithStyling").hide();
    });
    $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl03_h1").toggle(function() {
        $(this).removeClass("segMentBtn");
        $(this).addClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl03_pnlDescriptionWithStyling").show();
    }, function() {
        $(this).addClass("segMentBtn");
        $(this).removeClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl03_pnlDescriptionWithStyling").hide();
    });
    $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl04_h1").toggle(function() {
        $(this).removeClass("segMentBtn");
        $(this).addClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl04_pnlDescriptionWithStyling").show();
    }, function() {
        $(this).addClass("segMentBtn");
        $(this).removeClass("segMentBtnOn");
        $("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl04_pnlDescriptionWithStyling").hide();
    });
});

Open in new window

what about the place where you reference the js files.. have you also referenced the js file that you have created... where your code for toggle exists?
The aspx page has a usercontrol called financedetails.acsx inside there is the user control that i am having problems with
Main aspx page

<%@ Page Title="Toyota Finance" Language="C#" MasterPageFile="~/MasterPages/NewFinancial.master" AutoEventWireup="true" Inherits="Page_FinanceDetail" Theme="ToyotaSkin" Codebehind="FinanceDetail.aspx.cs" %>
<%@ Register src="~/Controls/FinanceDetailContentMedia.ascx" tagname="FinanceDetailContentMedia" tagprefix="uc2" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<%@ Register src="~/Controls/FinanceDetail.ascx" tagname="FinanceDetail" tagprefix="uc1" %>
<%@ Register src="Controls/JourneyBar.ascx" tagname="journeyBar" tagprefix="uc6" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript" src="includes/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="includes/jquery.hoverIntent.minified.js"></script>
    <script type="text/javascript" src="includes/jquery.js"></script>
    <script type="text/javascript" src="includes/jquery.qtip-1.0.0-rc3.min.js"></script>
    <script type="text/javascript" src="includes/vJustify.js"></script>
    <script type="text/javascript" src="includes/jquery.url.packed.js"></script>
    <script type="text/javascript" src="includes/Calculators/generic.js"></script>
    <script type="text/javascript" src="includes/Calculators/vehiclerepayment.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("body").attr("id", "body_hom");
            $("body").attr("class", "body_fin body_cal");
            $(".qtip").qtip({
                content: false,
                style: {
                    tip: 'leftMiddle',
                    name: 'light',
                    border: {
                        width: 1,
                        color: '#bfbfbf'
                    },
                    padding: 10
                },
                position: {
                    corner: {
                        target: 'rightMiddle',
                        tooltip: 'leftMiddle'
                    }
                }
            });
        });


        function IESafeOffsetParent(elem)
        {
            try {
                return elem.offsetParent;
            }
            catch (e) {
                return document.body;
            }
        }

        // The Offset Method
        // Originally By Brandon Aaron, part of the Dimension Plugin
        // http://jquery.com/plugins/project/dimensions
        jQuery.fn.offset = function()
        {
            ///     <summary>
            ///             Gets the current offset of the first matched element relative to the viewport.
            ///     </summary>
            ///     <returns type="Object">An object with two Integer properties, 'top' and 'left'.</returns>

            var left = 0, top = 0, elem = this[0], results;

            if (elem) with (jQuery.browser) {
                var parent = elem.parentNode,
                offsetChild = elem,
                offsetParent = IESafeOffsetParent(elem),
                doc = elem.ownerDocument,
                safari2 = safari && parseInt(version) < 522 && !/adobeair/i.test(userAgent),
                css = jQuery.curCSS,
                fixed = css(elem, "position") == "fixed";

                // Use getBoundingClientRect if available
                if (false && elem.getBoundingClientRect) {
                    var box = elem.getBoundingClientRect();

                    // Add the document scroll offsets
                    add(box.left + Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft),
                        box.top + Math.max(doc.documentElement.scrollTop, doc.body.scrollTop));

                    // IE adds the HTML element's border, by default it is medium which is 2px
                    // IE 6 and 7 quirks mode the border width is overwritable by the following css html { border: 0; }
                    // IE 7 standards mode, the border is always 2px
                    // This border/offset is typically represented by the clientLeft and clientTop properties
                    // However, in IE6 and 7 quirks mode the clientLeft and clientTop properties are not updated when overwriting it via CSS
                    // Therefore this method will be off by 2px in IE while in quirksmode
                    add(-doc.documentElement.clientLeft, -doc.documentElement.clientTop);

                    // Otherwise loop through the offsetParents and parentNodes
                } else {

                    // Initial element offsets
                    add(elem.offsetLeft, elem.offsetTop);

                    // Get parent offsets
                    while (offsetParent) {
                        // Add offsetParent offsets
                        add(offsetParent.offsetLeft, offsetParent.offsetTop);

                        // Mozilla and Safari > 2 does not include the border on offset parents
                        // However Mozilla adds the border for table or table cells
                        if (mozilla && !/^t(able|d|h)$/i.test(offsetParent.tagName) || safari && !safari2)
                            border(offsetParent);

                        // Add the document scroll offsets if position is fixed on any offsetParent
                        if (!fixed && css(offsetParent, "position") == "fixed")
                            fixed = true;

                        // Set offsetChild to previous offsetParent unless it is the body element
                        offsetChild = /^body$/i.test(offsetParent.tagName) ? offsetChild : offsetParent;
                        // Get next offsetParent
                        offsetParent = offsetParent.offsetParent;
                    }

                    // Get parent scroll offsets
                    while (parent && parent.tagName && !/^body|html$/i.test(parent.tagName)) {
                        // Remove parent scroll UNLESS that parent is inline or a table to work around Opera inline/table scrollLeft/Top bug
                        if (!/^inline|table.*$/i.test(css(parent, "display")))
                        // Subtract parent scroll offsets
                            add(-parent.scrollLeft, -parent.scrollTop);

                        // Mozilla does not add the border for a parent that has overflow != visible
                        if (mozilla && css(parent, "overflow") != "visible")
                            border(parent);

                        // Get next parent
                        parent = parent.parentNode;
                    }

                    // Safari <= 2 doubles body offsets with a fixed position element/offsetParent or absolutely positioned offsetChild
                    // Mozilla doubles body offsets with a non-absolutely positioned offsetChild
                    if ((safari2 && (fixed || css(offsetChild, "position") == "absolute")) ||
                        (mozilla && css(offsetChild, "position") != "absolute"))
                        add(-doc.body.offsetLeft, -doc.body.offsetTop);

                    // Add the document scroll offsets if position is fixed
                    if (fixed)
                        add(Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft),
                                Math.max(doc.documentElement.scrollTop, doc.body.scrollTop));
                }

                // Return an object with top and left properties
                results = { top: top, left: left };
            }

            function border(elem)
            {
                ///     <summary>
                ///             This method is internal.
                ///     </summary>
                ///     <private />
                add(jQuery.curCSS(elem, "borderLeftWidth", true), jQuery.curCSS(elem, "borderTopWidth", true));
            }

            function add(l, t)
            {
                ///     <summary>
                ///             This method is internal.
                ///     </summary>
                ///     <private />
                left += parseInt(l, 10) || 0;
                top += parseInt(t, 10) || 0;
            }

            return results;
        };
        
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Image" Runat="Server">
    <div class="paddingTop10px paddingBot10px trollBorTop">
        <uc6:journeyBar ID="journeyBar1" runat="server" />
    </div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <uc1:FinanceDetail ID="FinanceDetail1" runat="server" />
    <div class="clear"></div>
    <div class="clear"></div>
    <div class="width870">
        <uc2:FinanceDetailContentMedia ID="FinanceDetailContentMedia1" runat="server" />
    </div>
    <div class="width870 table shade"></div>
    <script type="text/javascript">
        $(window).load(function() {
            $(".jqColumn").vjustify();
        });
    </script>
</asp:Content>

inbedded user control

<%@ Control Language="C#" AutoEventWireup="true" Inherits="Controls_FinanceDetail" CodeBehind="FinanceDetail.ascx.cs" %>
<%@ Register Src="specialOffers.ascx" TagName="specialOffers" TagPrefix="uc1" %>
<%@ Register Src="~/Controls/FinanceCalculatorModelRangeSelector.ascx" TagName="FinanceCalculatorModelRangeSelector"
    TagPrefix="uc2" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script type="text/javascript" src="includes/jquery.colorbox-min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $(".WesBank").colorbox({
            width: "780px",
            height: "455px",
            iframe: true
        });
    });
</script>

<div class="width872 floatLeft marginTop10px">
    <asp:Image ID="Image1" ImageUrl="~/images/botRight.png" ImageAlign="right" runat="server" />
    <asp:Image ID="Image2" ImageUrl="~/images/botLeft.png" ImageAlign="left" runat="server" />
    <div class="botMnuBG">
        <div >
        <div class="floatLeft marginTop8px">
            <telerik:radcombobox id="ddnFinancingPackages2" runat="server" height="140px" width="215px"
                onselectedindexchanged="ddnFinancingPackages_SelectedIndexChanged" autopostback="True">
            <CollapseAnimation 
                        Type="OutQuint" 
                        Duration="200">
            </CollapseAnimation>
        </telerik:radcombobox>
        </div>
            <ul class="mnuRedLeft floatRight padding6px">
                <li class="mnuRed_cal">
                    <h4>
                        <asp:LinkButton ID="LBCalculator" Text="Calculator" runat="server" OnClick="LBCalculator_Click"></asp:LinkButton></h4>
                </li>
                <li class="mnuRed_dow">
                    <h4>
                        <asp:HyperLink ID="HLApplicationDownLoad" runat="server">Application Download</asp:HyperLink></h4>
                </li>
            </ul>
        </div>
        <%--        <div class="floatLeft padding6px">
            <asp:Image ID="Image3" ImageUrl="~/images/arrowRedLeft.gif" runat="server" />
            <a href="financeLanding.aspx">
                <h4>
                    Back to Financing</h4>
            </a>
        </div>
--%>
    </div>
    <asp:UpdatePanel ID="UPCalculator" runat="server">
        <ContentTemplate>
            <div class="">
                <uc2:FinanceCalculatorModelRangeSelector ID="FinanceCalculatorModelRangeSelector"
                    runat="server" />
            </div>
            <div class="clear">
            </div>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="LBCalculator"  />
        </Triggers>
    </asp:UpdatePanel>
</div>
<div class="mainHeaderBG">
    <h2>
        <div class="floatRight paddingRight20px marginTop10px">
        <asp:UpdatePanel ID="UPFinancePackage" runat="server" >
        <ContentTemplate>
            <telerik:radcombobox id="ddnFinancingPackages" runat="server" height="140px" width="215px"
                onselectedindexchanged="ddnFinancingPackages_SelectedIndexChanged" autopostback="True">
            <CollapseAnimation 
                        Type="OutQuint" 
                        Duration="200">
            </CollapseAnimation>
            
        </telerik:radcombobox></ContentTemplate>
            </asp:UpdatePanel>
        </div>
        <asp:Label ID="lblTitle" runat="server"></asp:Label>
    </h2>
</div>
<div class="width336 floatLeft marginTop10px">
    <asp:Image ImageUrl="~/images/subHRight.png" ImageAlign="right" runat="server" />
    <asp:Image ImageUrl="~/images/subHLeft.png" ImageAlign="left" runat="server" />
    <div class="contentHeadBG">
        <h3>
            <asp:Label ID="lblDescription" runat="server"></asp:Label></h3>
    </div>
    <div class="borderContentLeft borderContentRight jqColumn">
        <div class="padding10px contentServBG">
            <h4>
                How does it work?</h4>
            <br />
            <asp:Label ID="lblContent" runat="server"></asp:Label><br />
            <br />
            Call Toyota Financial Services on:<br />
            <asp:Image ImageUrl="~/images/icons/financeNo.gif" runat="server" />
        </div>
    </div>
    <asp:Image ImageUrl="~/images/footer_336.png" runat="server" />
</div>
<div class="width336 floatLeft marginTop10px marginLeft10px">
    <asp:Image ImageUrl="~/images/subHRight.png" ImageAlign="right" runat="server" />
    <asp:Image ImageUrl="~/images/subHLeft.png" ImageAlign="left" runat="server" />
    <div class="contentHeadBG">
        <h3>
            What you need to apply:</h3>
    </div>
    <div class="borderContentLeft borderContentRight jqColumn">
        <div class="padding10px contentServBG">
            <asp:Repeater ID="RepFinancingRequirements" runat="server">
                <HeaderTemplate>
                    <ul class="greenBullet">
                </HeaderTemplate>
                <ItemTemplate>
                    <li>
                        <asp:Label ID="lblRequirements0" Text='<%# DataBinder.Eval(Container.DataItem,"Requirements") %>'
                            runat="server">
                        </asp:Label>
                    </li>
                </ItemTemplate>
                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
            <br />
            <div class="rightAlign">
                <%--<asp:HyperLink NavigateUrl="https://wbo.wesbank.co.za/FinanceApps/vehicle/app/index.jspx?siteID=toyota&appType=DLR" Target="_blank" runat="server">
        <asp:Image ID="ImageButton1" runat="server" ImageUrl="~/images/buttons/btnApplyNow.png" CssClass="cursor" /></asp:HyperLink>--%>
                <asp:ImageButton ID="imgApplyNow" ImageUrl="~/images/buttons/btnApplyNowFin2.jpg"
                    CssClass="cursor" runat="server" OnClick="imgApplyNow_Click" Visible="true" />
                <asp:Panel ID="ModalPanel" runat="server" Width="750px" CssClass="modalPopupOther none"
                    Visible="false">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
                        <tr>
                            <td class="modelHeadOther">
                                <asp:ImageButton ID="OKButton" runat="server" ImageUrl="~/images/buttons/btnClose.png" />
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                <iframe src='<%= ApplyNowURL %>' width="100%" height="400px" title="_finwin"></iframe>
                            </td>
                        </tr>
                        <tr>
                            <td class="modelFooterOther">
                                &nbsp;
                            </td>
                        </tr>
                    </table>
                </asp:Panel>
                <%--  <asp:HyperLink ID="HL" runat="server" NavigateUrl='<%# DataBinder.Eval(Container.DataItem,"ApplyNowURL") %>'
                CssClass="WesBank"></asp:HyperLink>--%>
                <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/images/buttons/btnAddTrolleyFin2.jpg"
                    OnClick="btnAdd_Click" />
            </div>
        </div>
    </div>
    <div class="clear">
    </div>
    <asp:Image ImageUrl="~/images/footer_336.png" runat="server" />
</div>
<div class="width186 floatRight marginTop10px">
    <uc1:specialOffers ID="specialOffers1" runat="server" />
</div>
<div class="clear">
</div>
<asp:Image ID="Image4" ImageUrl="~/images/finNumber.jpg" runat="server" CssClass="marginTop4px" />
<div class="width870">
    <div class="floatLeft padding10px">
        <asp:Image ImageUrl="~/images/icons/finServices.gif" runat="server" />
    </div>
    <div class="floatRight padding10px rightAlign">
        &copy; Toyota Financial Services (South Africa) (PTY) Limited. Reg. No.<br />
        1982/010082/07. VAT No. 4300187533. An Authorised Financial<br />
        Services (FSP No. 7454) and Registered Credit Provider (NCRCP62).
    </div>
</div>

final user control

<%@ Control Language="C#" AutoEventWireup="true" Inherits="Controls_FinanceCalculatorModelRangeSelector"
    CodeBehind="FinanceCalculatorModelRangeSelector.ascx.cs" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%@ Register Src="~/Controls/FinanceColourSelector.ascx" TagName="FinanceColourSelector"
    TagPrefix="uc1" %>
<%@ Register Src="FinanceSelectedVehicleAccessories.ascx" TagName="FinanceSelectedVehicleAccessories"
    TagPrefix="uc2" %>
<%@ Register Src="MaintenanceAndServicingCalculators.ascx" TagName="MaintenanceAndServicingCalculators"
    TagPrefix="uc3" %>
<%@ Register Src="FinanceCalculator.ascx" TagName="FinanceCalculator" TagPrefix="uc4" %>
<%@ Register Src="FinanceMaintenanceAndServicingCalculators.ascx" TagName="FinanceMaintenanceAndServicingCalculators"
    TagPrefix="uc5" %>
<%@ Register Src="SelectDerivativeAndKmForServiceOrMaintenance.ascx" TagName="SelectDerivativeAndKmForServiceOrMaintenance"
    TagPrefix="uc6" %>

<script type="text/javascript">
//var zxcMaxYScroll=500;

//function zxcStopScroll()
//{
//    window.scroll(0,0); 
//}

//var StopScrolling = "";

//if(StopScrolling = 1)
//{
//    window.onscroll=zxcStopScroll
//}

<!--
    /***********************************************
    * IFrame SSI script II-  Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
    * Visit DynamicDrive.com for hundreds of original DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/

    //Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
    //Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
    var iframeids = ["Models"]

    //Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
    var iframehide = "yes"

    var getFFVersion = navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
    var FFextraHeight = parseFloat(getFFVersion) >= 0.1 ? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

    function resizeCaller() {
        var dyniframe = new Array()
        for (i = 0; i < iframeids.length; i++) {
            if (document.getElementById)
                resizeIframe(iframeids[i])
            //reveal iframe for lower end browsers? (see var above):
            if ((document.all || document.getElementById) && iframehide == "no") {
                var tempobj = document.all ? document.all[iframeids[i]] : document.getElementById(iframeids[i])
                tempobj.style.display = "block"
            }
        }
    }

    function resizeIframe(frameid) {
        var currentfr = document.getElementById(frameid)
        if (currentfr && !window.opera) {
            currentfr.style.display = "block"
            if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
                currentfr.height = currentfr.contentDocument.body.offsetHeight + FFextraHeight;
            else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
                currentfr.height = currentfr.Document.body.scrollHeight;
            if (currentfr.addEventListener)
                currentfr.addEventListener("load", readjustIframe, false)
            else if (currentfr.attachEvent) {
                currentfr.detachEvent("onload", readjustIframe) // Bug fix line
                currentfr.attachEvent("onload", readjustIframe)
            }
        }
    }

    function readjustIframe(loadevt) {
        var crossevt = (window.event) ? event : loadevt
        var iframeroot = (crossevt.currentTarget) ? crossevt.currentTarget : crossevt.srcElement
        if (iframeroot)
            resizeIframe(iframeroot.id);
    }

    function loadintoIframe(iframeid, url) {
        if (document.getElementById)
            document.getElementById(iframeid).src = url
    }

    if (window.addEventListener)
        window.addEventListener("load", resizeCaller, false)
    else if (window.attachEvent)
        window.attachEvent("onload", resizeCaller)
    else
        window.onload = resizeCaller

    function MM_preloadImages() { //v3.0
        var d = document; if (d.images) {
            if (!d.MM_p) d.MM_p = new Array();
            var i, j = d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i < a.length; i++)
                if (a[i].indexOf("#") != 0) { d.MM_p[j] = new Image; d.MM_p[j++].src = a[i]; }
        }
    }
//-->
</script>

<asp:Panel ID="pnlServiceAndMaintenance" runat="server">
    <div class="contentBorBG">
    <asp:Panel ID="pnlCalcHeader" runat="server" Visible="false"> 
        <div class="serviceMainHead toyota">Monthly Instalment Calculator</div>
    </asp:Panel>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td class="padding10px" valign="top"><h4>Select your model to calculate Toyota Instalment Finance</h4></td>
            <td class="padding10px rightAlign width390">
                <asp:RadioButtonList ID="rblVehicleSelector" runat="server" RepeatDirection="Horizontal" AutoPostBack="true" OnSelectedIndexChanged="rblVehicleSelector_SelectedIndexChanged">
                    <%--<asp:ListItem>Passenger</asp:ListItem>
                    <asp:ListItem>4x4 and SUVs</asp:ListItem>
                    <asp:ListItem>Commercial</asp:ListItem>--%>
                </asp:RadioButtonList>
                <telerik:RadComboBox ID="ddnVehicleRanges" runat="server" Skin="Default" Height="140px"
                    Width="150px" OnClientSelectedIndexChanging="LoadRanges" EnableLoadOnDemand="true">
                </telerik:RadComboBox>
                <telerik:RadComboBox ID="ddnVehicleModels" runat="server" Skin="Default" Height="140px"
                    Width="150px" OnClientItemsRequested="ItemsLoaded" OnItemsRequested="ddnVehicleModels_ItemsRequested"
                    EnableLoadOnDemand="true" OnSelectedIndexChanged="ddnVehicleModels_SelectedIndexChanged"
                    AutoPostBack="true">
                </telerik:RadComboBox>
                <asp:ImageButton ID="cmdNext" ImageUrl="~/images/buttons/btnNext.png" ImageAlign="Middle" 
                    runat="server" onclick="cmdNext_Click" />
                <asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup"
                    BackColor="White" Width="800" Height="600">
                    <div>
                        <asp:Panel ID="Panel2" runat="server">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td class="modelHead">
                                        <asp:ImageButton ID="cmdCancel" Text="Cancel" runat="server" ImageUrl="~/images/buttons/btnClose.png"
                                            align="right" ImageAlign="Right" />
                                        <asp:Label ID="lblTitle" runat="server"></asp:Label>
                                    </td>
                                </tr>
                            </table>
                        </asp:Panel>
                    </div>
                    <div>
                        <%= ModalURL%>
                    </div>
                </asp:Panel>
                <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none" />
                <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="hiddenTargetControlForModalPopup"
                    PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="false"
                    PopupDragHandleControlID="Panel1" Drag="true" CancelControlID="cmdCancel" /><br />
                    <asp:LinkButton ID="lblNeedHelp" runat="server" OnClick="lblNeedHelp_Click"
                    OnClientClick="return CheckSelectedCount(this);"><span class="toyota">Need help?</span> 
                    Try the model chooser <asp:Image ImageUrl="~/images/arrow_on.png" runat="server" /></asp:LinkButton>
            </td>
        </tr>
    </table>
    <asp:Panel ID="pnlCalcBody" runat="server" Visible="false">
    <div class="modelHeadBG">Car Name and Range</div>
    <table width="100%" class="table" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td valign="top">
<%--                <asp:HyperLink ID="HyperLink1" NavigateUrl="~/trolley.aspx" runat="server" CssClass="marginRight10px"
                    ImageUrl="~/images/buttons/btnBacktoTrolley.png"></asp:HyperLink><br />
--%>                <br />
                <div align="center" class="padding10px">
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="Inline">
                        <ContentTemplate>
                            <asp:Image ID="imgModel" runat="server" Height="119" />
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
                        </Triggers>
                    </asp:UpdatePanel>
                </div>
                <br />
                <%--<ul class="btmModelNav">
                    <li>Finance Product: </li>
                    <li><a href="#">Installment Finance</a></li><li><a href="#">Lease Finance</a></li></ul>
                <br />--%>
                <uc4:FinanceCalculator ID="FinanceCalculator1" runat="server" />
            </td>
            <td valign="top" style="width: 439px; background-color: #f8f8f8;">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td><div class="finDetailToggleBG padding4px">
                            <div class="floatRight">
                                <a href="javascript:;" id="a1">
                                    <img src="images/arrowToggleGrey.gif" id="tog1"  /></a></div>
                            View Colour and Accessories Options</div>
                            <div class="padding4px none" id="life">
                                <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" RenderMode="Inline">
                                    <ContentTemplate>
                                        <uc1:FinanceColourSelector ID="FinanceColourSelector1" runat="server" />
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
                                    </Triggers>
                                </asp:UpdatePanel>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td><div class="finDetailToggleBG padding4px">
                            <div class="floatRight">
                                <a href="javascript:;" id="a2">
                                    <img src="images/arrowToggleGrey.gif" id="tog2" /></a></div>
                            Dealer Options/Accessories</div>
                            <div class="padding4px none" id="cost">
                                <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional" RenderMode="Inline">
                                    <ContentTemplate>
                                        <uc2:FinanceSelectedVehicleAccessories ID="FinanceSelectedVehicleAccessories1" runat="server" />
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
                                    </Triggers>
                                </asp:UpdatePanel>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td><div class="finDetailToggleBG padding4px">
                            <div class="floatRight">
                                <a href="javascript:;" id="a3">
                                    <img src="images/arrowToggleGrey.gif" id="tog3" /></a></div>
                            Service and Maintenance Options</div>
                            <div class="padding4px none" id="body">
                                <%--<uc3:MaintenanceAndServicingCalculators ID="MaintenanceAndServicingCalculators1" runat="server" />--%>
                                <asp:UpdatePanel ID="UpdatePanel5" runat="server" UpdateMode="Conditional" RenderMode="Inline">
                                    <ContentTemplate>
                                        <%--<uc5:FinanceMaintenanceAndServicingCalculators ID="FinanceMaintenanceAndServicingCalculators1"
                                            runat="server" />--%>
                                            <%--<strong><h3>Service<h3/></strong><br/><br/>--%>
                                        <uc6:SelectDerivativeAndKmForServiceOrMaintenance ID="SelectDerivativeAndKmForServiceOrMaintenance1" runat="server" />
                                        <%--<hr />
                                        <strong><h3>Maintenance<h3/></strong><br/><br/>--%>
                                        <uc6:SelectDerivativeAndKmForServiceOrMaintenance ID="SelectDerivativeAndKmForServiceOrMaintenance2" runat="server"/>
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
                                    </Triggers>
                                </asp:UpdatePanel>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="right" class="padding4px">
                            <asp:UpdatePanel ID="upTrolleyTotalCost" runat="server" UpdateMode="Conditional"
                                RenderMode="Inline">
                                <ContentTemplate>
                                    <div class="price">
                                        R<asp:Label ID="lbTrolleyTotalCost" runat="server"><%=LoadTrolleyTotalCost()%></asp:Label>
                                        <asp:HiddenField ID="hfTrolleyExtrasCost" runat="server" />
                                        <asp:HiddenField ID="hfVehicleCost" runat="server" />
                                    </div>
                                </ContentTemplate>
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
                                </Triggers>
                            </asp:UpdatePanel>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <div class="darkBG padding10px">
    <div class="darkBG padding6px">
    CALCULATION RESULTS</div>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="whiteBG padding10px table">
        <tr>
            <td valign="top" class="padding6px">
                <table border="0" cellpadding="0" cellspacing="0" width="300">
                    <tr>
                        <td align="right" class="padding6px" width="150">
                            ESTIMATED PURCHASE PRICE:
                        </td>
                        <td>
                            <div class="price2">
                                R<asp:Label ID="lblTotalAmount" runat="server" Text="0"></asp:Label>
                                <asp:HiddenField ID="hfTotalAmount" runat="server" />
                            </div>
                        </td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td align="right" class="padding6px">
                            MONTHLY INSTALLMENT:
                        </td>
                        <td>
                            <div class="price2">
                                R<asp:Label ID="lbTotalPerMonth" runat="server" Text="0"></asp:Label>
                                <asp:HiddenField ID="hfTotalPerMonth" runat="server" />
                            </div>
                        </td>
                        <td class="toyota">&nbsp;*</td>
                    </tr>
                </table>
            </td>
            <td class="padding6px" width="122">
                <asp:ImageButton ID="btnAdd" runat="server" ImageUrl="~/images/buttons/btnAddTrolleyFinance.jpg"
                    OnClick="btnAdd_Click" />
            </td>
            <td class="padding6px" width="122">
                <asp:HyperLink ID="HyperLink10" ImageUrl="~/images/buttons/btnPrintYourCalculation.jpg"
                    Target="_blank" NavigateUrl="~/PrintFinanceCalculator.aspx" runat="server"></asp:HyperLink>
            </td>
        </tr>
    </table>
    <div class="toyota padding6px">
        * Initiation Fee and Monthly Administration fee included.
    </div>
    </div>
    </div>
    <asp:Image ID="Image1" ImageUrl="~/images/footer_872.png" runat="server" />
    <div class="alertBGFin marginTop6px">
        Disclaimer<br />
        All calculations made on calculators supplied on this site, together with rates quoted, are guidelines only and are subject to confirmation at the time of finalising any transactions. All information regarding the products, fees, interest and/or costs which are included in and form a fundamental basis of the calculations are subject to change at any time prior to a final pre-agreement quote being handed to the User. The User indemnifies Toyota Financial Services against any loss or liability, which the User may suffer as a result of the use of any calculator. The site and all information provided on this site and the services provided on this site, are provided "as is". The information provided on this site should not be treated as professional advice of any kind.
    </div>
    </asp:Panel>
</asp:Panel>

<script type="text/javascript">

    function LoadRanges(combo, eventarqs) {
        var areaCombo = $find("<%=ddnVehicleModels.ClientID%>");
        var item = eventarqs.get_item();
        areaCombo.set_text("Loading...");

        if (item.get_index() > 0) {
            areaCombo.requestItems(item.get_value(), false);
        }
        else {
            areaCombo.set_text(" ");
            areaCombo.clearItems();
        }
    }

    function ItemsLoaded(combo, eventarqs) {
        var areaCombo = $find("<%=ddnVehicleModels.ClientID%>");
        if (combo.get_items().get_count() > 0) {
            combo.set_text(combo.get_items().getItem(0).get_text());
            combo.get_items().getItem(0).highlight();
        }
        combo.showDropDown();
    }

    function SetUniqueRadioButton(nameregex, current) {
        re = new RegExp(nameregex);
        for (i = 0; i < document.forms[0].elements.length; i++) {
            elm = document.forms[0].elements[i]
            if (elm.type == 'radio') {
                if (re.test(elm.name)) {
                    elm.checked = false;
                }
            }
        }
        current.checked = true;
    }
</script>

<script type="text/javascript">

    function CheckSelectedCount(cmdHelpChoose) {

        var objVehicleRangeControl;
        objVehicleRangeControl = document.getElementById('<%=ddnVehicleRanges.ClientID%>');
        //        alert((objVehicleRangeControl.value).toLowerCase().replace(new RegExp(/ /g), "").replace(new RegExp(/-/g), ""))

        if ((objVehicleRangeControl.value).toLowerCase().replace(new RegExp(/ /g), "").replace(new RegExp(/-/g), "") != "selectarange") {
            return true;
        }
        else {
            alert("Please select a range...");
            return false;
        }

    }
    


</script>

Open in new window

Try using ~ (tild) in the reference like below..,

<script type="text/javascript" src="includes/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="~/includes/jquery.hoverIntent.minified.js"></script>
    <script type="text/javascript" src="~/includes/jquery.js"></script>
    <script type="text/javascript" src="~/includes/jquery.qtip-1.0.0-rc3.min.js"></script>
    <script type="text/javascript" src="~/includes/vJustify.js"></script>
    <script type="text/javascript" src="~/includes/jquery.url.packed.js"></script>
    <script type="text/javascript" src="~/includes/Calculators/generic.js"></script>
    <script type="text/javascript" src="~/includes/Calculators/vehiclerepayment.js"></script>

Open in new window

Is there any change in the folder hierarchy, when it started failing?

is "includes" folder in the root? Where is the aspx page?
There has been no changes in the hierachy.
The includes directory is in the root and the aspx file is in the root.

root
 aspxfile
 includes
   js file.

You can view the live site.
go to www.toyota.co.za
click the big red I want to Apply for finance button
choose a range then choose a model
click next

you should see three options

color and accesories
Dealer Options/Accessories
Service and Maintenance Options

These options should toggle open and closed when you click on the grey arrow.

   
I have figured out now that the jscript code is working fine and all the JS files are in the correct place.
My problem is that when I do any sort of postback to the page all the javascript on the page stops working.Do any of you know why this would happen or what could cause it.
If I remember correctly with ASP.NET you can check if it is postback with something like this:
<%
if(postback)
 
else
%>
   <script type="text/javascript" src="includes/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="~/includes/jquery.hoverIntent.minified.js"></script>
    <script type="text/javascript" src="~/includes/jquery.js"></script>
    <script type="text/javascript" src="~/includes/jquery.qtip-1.0.0-rc3.min.js"></script>
    <script type="text/javascript" src="~/includes/vJustify.js"></script>
    <script type="text/javascript" src="~/includes/jquery.url.packed.js"></script>
    <script type="text/javascript" src="~/includes/Calculators/generic.js"></script>
    <script type="text/javascript" src="~/includes/Calculators/vehiclerepayment.js"></script>
<%
end if
%>

Perhaps if you have your code NOT to reload again if there is postback, maybe the jquery isn't initiallized again.

My code might be wrong (it's been a while since I wrote ASP.NET) but you get the point