SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scriptaculous Accordion

    Hi,

    Im stuck...I am using this accordion. I want to create an unordered list at the top of the page that will link to the anchors of each accordian section, but when clicked, the page will anchor down and toggle that specific section. Can this be done?

  2. #2
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would think it would be something similar to this...but cant get it quite right:
    Code HTML4Strict:
    				<p><a href="#specs" onclick="$('specs').addClassName('toggleActive').toggle();">lightbox test</a></p>	
    					<div id="vertical_container">
     						<h3 id="specs" class="accordion_toggle">Specifications</h3>
    							<div class="accordion_content">
    								content...
     							</div>
     
    						<h3 class="accordion_toggle">Color Charts &amp; Paint Systems Information</h3>
    							<div class="accordion_content">
     								content...
    							</div>
     
    						<h3 class="accordion_toggle">Warranty</h3>
    							<div class="accordion_content">
     								content...
     							</div>
     
     						<h3 class="accordion_toggle">Installation &amp; Care</h3>
    							<div class="accordion_content">
     								content...
     							</div>
     					 </div>

  3. #3
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I have a live demo of what i'm trying to accomplish. Right now it just adds the class to the h3 element. I need it to activate the accordion for the containing div, any thoughts? Im lost...

  4. #4
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have it working, but I'm not sure if this is the most efficient/right way:
    Code JavaScript:
    var bottomAccordion = new accordion('vertical_container');
    			// Opens via right side bar links
    			$('specs_listen').observe('click', respondToSpecs);
    				function respondToSpecs(event) {
    					bottomAccordion.activate($$('#vertical_container .accordion_toggle')[0]);
    				}
    			$('charts_listen').observe('click', respondToCharts);
    				function respondToCharts(event) {
    					bottomAccordion.activate($$('#vertical_container .accordion_toggle')[1]);
    				}
    			$('warranty_listen').observe('click', respondToWarranty);
    				function respondToWarranty(event) {
    					bottomAccordion.activate($$('#vertical_container .accordion_toggle')[2]);
    				}
    			$('care_listen').observe('click', respondToCare);
    				function respondToCare(event) {
    					bottomAccordion.activate($$('#vertical_container .accordion_toggle')[3]);
    				}
    			}
    Code HTML4Strict:
    <ul>
                    	<li id="specs_listen"><a href="#specs">Specs Test</a></li>
                        <li id="charts_listen"><a href="#charts">Charts Test</a></li>
                        <li id="warranty_listen"><a href="#warranty">Warranty Test</a></li>
                        <li id="care_listen"><a href="#care">Care Test</a></li>
                    </ul>
     
    					<div id="vertical_container">
     						<h3 id="specs" class="accordion_toggle">Specifications</h3>
    							<div id="specs_content" class="accordion_content">
    								content...
     							</div>
     
    						<h3 id="charts" class="accordion_toggle">Color Charts &amp; Paint Systems Information</h3>
    							<div class="accordion_content">
     								content...
    							</div>
     
    						<h3 id="warranty" class="accordion_toggle">Warranty</h3>
    							<div class="accordion_content">
     								content...
     							</div>
     
     						<h3 id="care" class="accordion_toggle">Installation &amp; Care</h3>
    							<div class="accordion_content">
     								content...
     							</div>
     					 </div>


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
  •