Javascript Accordion

Discussion in 'Programming' started by Johnathan, May 5, 2008.

to remove all ads.
  1. Johnathan

    Johnathan New Member

    Messages:
    8
    Code:
    <div id="basic-accordian" ><!--Parent of the Accordion-->
    
    
    <!--Start of each accordion item-->
      <div id="test-header" class="accordion_headings header_highlight" >Win  Downloads</div>
      <!--Heading of the accordion ( clicked to show n hide ) -->
      
      <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
      
      <div id="test-content"><!--DIV which show/hide on click of header-->
      
      	<!--This DIV is for inline styling like padding...-->
        <div class="accordion_child"><a href="win-3di.php">3D/Imageing</a><br />
            <a href="win-av.php">Audio Visual</a><br />
            <a href="win-web.php">Web Design/Development</a><br />
            <a href="win-office.php">Office/Print</a>
            </p>
          </div>
        
      </div>
    <!--End of each accordion item--> 
    
    
    <!--Start of each accordion item-->
      <div id="test1-header" class="accordion_headings" >Mac Downloads</div>
      <!--Heading of the accordion ( clicked to show n hide ) -->
      
      <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
      
      <div id="test1-content"><!--DIV which show/hide on click of header-->
      
      	<!--This DIV is for inline styling like padding...-->
        <div class="accordion_child"><a href="mac-3di.php">3D/Imageing</a><br />
          <a href="mac-av.php">Audio Visual</a><br />
          <a href="mac-web.php">Web Design/Development</a><br />
          <a href="mac-office.php">Office/Print
          </a></div>
        
      </div>
    <!--End of each accordion item--> 
    
    
    
    <!--Start of each accordion item-->
      <div id="test2-header" class="accordion_headings" >Photoshop</div>
      <!--Heading of the accordion ( clicked to show n hide ) -->
      
      <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
      
      <div id="test2-content"><!--DIV which show/hide on click of header-->
      
      	<!--This DIV is for inline styling like padding...-->
        <div class="accordion_child"><a href="ps-brushes.php">Brushes</a><br /> 
          <a href="ps-patterns.php">Patterns
          </a><br /> 
          <a href="ps-gradients.php">Gradients
          </a><br /> 
          <a href="ps-plugins.php">Plugins</a><br />
          <a href="ps-presets.php">Presets</a></div>
        
      </div>
    <!--End of each accordion item--> 
    
    <!--Start of each accordion item-->
      <div id="test2-header" class="accordion_headings" >Scripts</div>
      <!--Heading of the accordion ( clicked to show n hide ) -->
      
      <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
      
      <div id="test2-content"><!--DIV which show/hide on click of header-->
      
      	<!--This DIV is for inline styling like padding...-->
        <div class="accordion_child"><a href="scripts-php.php">PHP</a><br />
          <a href="scripts-js.php">Javascript </a><br />
          <a href="scripts-html.php">(X)HTML </a><br /> 
          <a href="scripts-css.php">CSS</a><br /> 
          <a href="scripts-xml.php">XML</a></div>
        
      </div>
    <!--End of each accordion item--> 
    
    <!--Start of each accordion item-->
      <div id="test2-header" class="accordion_headings" >Other</div>
      <!--Heading of the accordion ( clicked to show n hide ) -->
      
      <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
      
      <div id="test2-content"><!--DIV which show/hide on click of header-->
      
      	<!--This DIV is for inline styling like padding...-->
        <div class="accordion_child">
        
               <script type="text/javascript">
    //<![CDATA[
    <!--
    google_ad_client = "pub-1424534937120197";
    /* 200x90, created 4/27/08 */
    google_ad_slot = "3527801093";
    google_ad_width = 200;
    google_ad_height = 90;
    //-->
    //]]>
            </script> 
            <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script><br />
     
        </div>
      </div>
    </div>
    
    
    Anyone know why the Scripts and Other tabs aren't cloding and just staying open? The original script had three tabs and I just copied and pasted the stuff I though I needed but it isn't working properly. Here's the link to the page http://www.jbportal.net/downloads_copy.php

    Oh, and how can I make it start closed?
     
  2. Johnathan

    Johnathan New Member

    Messages:
    8
    Got it sorted.
     

Share This Page