Results 1 to 1 of 1

Thread: Accordion Script unable to click more that 1 link

  1. #1
    Join Date
    Aug 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Red face Accordion Script unable to click more that 1 link

    Apple style Accordion Menu

    http://www.dynamicdrive.com/dynamici...menu-apple.htm

    Hi, I am currently building an intranet site, with limited knowledge of html/js.

    Menu:
    Heading 1
    sublink a - target (new window)
    sublink b - target (Main)
    sublink c - target (Main)

    When clicking on either 1b or 1c the page loads in the main frame. However if 1b was clicked first then 1c would no longer load in the main frame of the page. Yet for some reason 1a still opens to a new page?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:(null)0="http://www.w3.org/TR/REC-html40">
    
    <head>
    
    <script type="text/javascript" src="test_menu/jquery-1.2.2.pack.js"></script>
    
    <script type="text/javascript" src="test_menu/ddaccordion.js">
    
    /***********************************************
    * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    </script>
    
    
    <script type="text/javascript">
    
    
    ddaccordion.init({
    	headerclass: "silverheader", //Shared CSS class name of headers group
    	contentclass: "submenu", //Shared CSS class name of contents group
    	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    	defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
    	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: false, //persist state of opened contents within browser session?
    	toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
    	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    		//do nothing
    	},
    	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		//do nothing
    	}
    })
    
    
    </script>
    
    
    <style type="text/css">
    
    .applemenu{
    margin: 5px 0;
    padding: 0;
    width: 200px; /*width of menu*/
    border: 1px solid #9A9A9A;
    }
    
    .applemenu div.silverheader a{
    background: black url('test_menu/silvergradient.gif') repeat-x center left;
    color: white;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
    width: auto;
    padding-left: 2px;
    text-decoration: none; font-style:bold; font-variant:normal; font-weight:normal; font-size:13px; font-family:Tahoma, Lucida Grande, Trebuchet MS, Helvetica, sans-serif; padding-right:2; padding-top:2px; padding-bottom:2px
    }
    
    
    .applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
    color: white;
    }
    
    
    .applemenu div.selected a, .applemenu div.silverheader a:hover{
    background-image: url('test_menu/silvergradientover.gif');
    color: white
    }
    
    .applemenu div.submenu{ /*DIV that contains each sub menu*/
    background: white;
    padding: 5px;
    height: 160px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
    }
    
    </style>
    
    <base target="main">
    <meta name="Microsoft Theme" content="ice 011">
    </head>
    
    <body>
    <p align="center" style="margin-top: 0; margin-bottom: 0"><b><font size="4">Main 
    Index</font></b><br />
    </p>
    
    <div class="applemenu">
    <div class="silverheader" style="width: 70; height: 16"><a href="www.pleasehelpme.com">Despatch</a></div>
    		<div class="submenu" style="width: 146; height: 46">
    		<p style="margin-top: 0; margin-bottom: 0">
            <a target="main" href="file://Waste16/everyone/WMNZ%20Intranet/Northern%20Region/Customer%20Services/CSRnoticeboard.htm">
            <font size="2">Driver Updates</font></a></p>
            <p style="margin-top: 0; margin-bottom: 0">
            <a target="main" href="MapIndicies/Mapindices%20%20V3b.xls">
            <font size="2">Map Indicies</font></a><br />
    	</div>
    <div class="silverheader" style="width: 84; height: 16"><a href="www.pleasehelpme.com" >Phone Lists</a></div>
    		<div class="submenu" style="width: 141; height: 44">
    		<p style="margin-top: 0; margin-bottom: 0">
            <a target="main" href="file://Waste16/everyone/WMNZ%20Intranet/Northern%20Region/AucPhoneList.htm">
            <font size="2">Auckland</font></a></p>
            <p style="margin-top: 0; margin-bottom: 0"><font size="2">Corporate</font></p>
            <p style="margin-top: 0; margin-bottom: 0"><font size="2">Fleet List</font><br />
    	</div>
    <div class="silverheader" style="width: 70; height: 16"><a href="www.pleasehelpme.com">Training</a></div>
    		<div class="submenu" style="width: 142; height: 154">
    		<p style="margin-top: 0; margin-bottom: 0">
            <font size="2"><a target="_self" href="Index_left_AS400.htm">AS400 Manual</a></font><p style="margin-top: 0; margin-bottom: 0">
            <font size="2">&nbsp; 
            General</font><p style="margin-top: 0; margin-bottom: 0"><font size="2">&nbsp; Customer 
            Service</font><p style="margin-top: 0; margin-bottom: 0"><font size="2">&nbsp; Admin</font><p style="margin-top: 0; margin-bottom: 0">
            <font size="2">&nbsp; 
            Commercial</font><p style="margin-top: 0; margin-bottom: 0">
            <font size="2">&nbsp; Ops</font><p style="margin-top: 0; margin-bottom: 0">
            <font size="2">Budget</font><p style="margin-top: 0; margin-bottom: 0">
            <a target="_blank" href="Sunshine/index.htm"><font size="2">Sunshine</font></a><p style="margin-top: 0; margin-bottom: 0">
            <font size="2"><a target="contents" href="Index_left_Training.htm">New Recruits</a></font><br />
    	</div>
    <div class="silverheader" style="width: 153; height: 16"><a href="www.pleasehelpme.com">Continuous Improvement</a></div>
    		<div class="submenu" style="width: 127; height: 20">
    		<p style="margin-top: 0; margin-bottom: 0"><font size="2">Overview</font></p>
            <p style="margin-top: 0; margin-bottom: 0"><font size="2">Suggestions</font></p>
            <p style="margin-top: 0; margin-bottom: 0"><font size="2">Staff Deals
            </font>
    	</div>
    <div class="silverheader" style="width: 117; height: 16"><a href="www.pleasehelpme.com">Human Resources</a></div>
    		<div class="submenu" style="width: 147; height: 106">
    		<p style="margin-top: 0; margin-bottom: 0">
            <a target="main" href="SpeakUp/SpeakUp_index.htm"><font size="2">Speak Up</font></a><p style="margin-top: 0; margin-bottom: 0">
            <a target="main" href="EAP/EAP_Index.htm"><font size="2">EAP</font></a><p style="margin-top: 0; margin-bottom: 0">
            <font size="2">H&amp;S</font><p style="margin-top: 0; margin-bottom: 0">
            <font size="2">&nbsp; ???</font><p style="margin-top: 0; margin-bottom: 0">
            <font size="2">&nbsp; 
            ???</font><p style="margin-top: 0; margin-bottom: 0">
            <a target="_blank" href="Recruitment%20Manual/recruitment_login_page.htm">
            <font size="2">Recruitment Process</font></a><br />
    	</div>		
    <div class="silverheader" style="width: 94; height: 16"><a href="www.pleasehelpme.com">Templates</a></div>
    		<div class="submenu" style="width: 157; height: 20">
    		<p style="margin-top: 0; margin-bottom: 0"><font size="2">
            <a target="main" href="TPI%20templates/Brand%20Toolbox%20Cover%20Letter.doc">Brand Toolbox</a></font><p style="margin-top: 0; margin-bottom: 0">
            <font size="2">
            <a target="_blank" href="TPI%20templates/Memo%20Template%20-%20Transpacific.doc">Memo's</a></font><p style="margin-top: 0; margin-bottom: 0">
            <font size="2">
            <a target="_blank" href="TPI%20templates/Fax%20Template%20-%20Transpacific%20.doc">
            Fax</a></font><p style="margin-top: 0; margin-bottom: 0">
            <font size="2">
            <a target="_blank" href="TPI%20templates/Letterhead%20Template%20(Plain%20Paper)%20-%20Transpacific%20I.doc">Letter - Plain</a></font><p style="margin-top: 0; margin-bottom: 0">
            <font size="2">
            <a target="_blank" href="TPI%20templates/Letterhead%20Template%20(Plain%20Paper)%20-%20Solid%20Waste%20(M.doc">Letter - Solid Waste</a></font><p style="margin-top: 0; margin-bottom: 0">
            <font size="2">
            <a target="_blank" href="TPI%20templates/Agenda%20Template%20-%20Transpacific%20.doc">Meeting 
            Agenda</a></font><p style="margin-top: 0; margin-bottom: 0"><font size="2">
            <a target="_blank" href="TPI%20templates/Meeting%20Minutes%20Template%20-%20Transpacific%20.doc">Meeting Minutes</a></font><br />
    	</div>		
    <div class="silverheader" style="width: 91; height: 16"><a href="www.pleasehelpme.com">Other Links</a></div>
    		<div class="submenu" style="width: 117; height: 58">
    		<p style="margin-top: 0; margin-bottom: 0"><font size="2">Within TPI</font><p style="margin-top: 0; margin-bottom: 0">
            <font size="2">Competitors</font><br />
    	</div>		
    </div>
    
            <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
            <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
    
            </body>
    </html>

    Any help with this is greatly appreciated and i would prefer not to use the mootools accordian as for me this is alot easier to understand.

    Kind Regards
    Greg
    Last edited by GregH; 09-01-2008 at 12:12 AM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •