I know there’s a ton of great accordion plug-ins out there. I needed a really simple accordion so I rolled my own. Here’s a Simple and easy to use accordion.
Sample:
http://stuffthatspins.com/stuff/jquery-accordion/
Download:
http://stuffthatspins.com/stuff/jquery-accordion/jquery-accordion.zip
<html> <head> <title>jquery accordion - simple</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js""></script> <script type=text/javascript> $(document).ready(function() { //attach this function to ".accordion" class on click. $('.accordion').click(function(){ //if the class is currently "closed" change to open and display div named #other- if($(this).hasClass('closed')){ //console.log ("opening"); $('#other-' + $(this).data('id')).slideDown(); $(this).removeClass('closed').addClass('open'); } else { //console.log ("close"); $('#other-' + $(this).data('id')).slideUp(); $(this).removeClass('open').addClass('closed'); } }); }); </script> <style> /* -------------- ACCORDION STUFF'n ----------- */ p { margin-left: 35px; } body { font-size: 15px; font-family: sans-serif; line-height: 150%; } a { font-variant: small-caps; color: #656565; } a:hover { color: #9f854c } .accordion { margin-left: 10px; } .hidden { display: none; } .closed { padding-left: 15px; background:url('img/closed.png'); background-repeat:no-repeat; background-position:left; display: block; } .open { padding-left: 15px; background:url('img/open.png'); background-repeat:no-repeat; background-position:left; display: block; } </style> </head> <body> <!--the jquery function accordion is attached to this via class name- we pass data-id is grabbed when clicked--> <a href="javascript:void(0)" class="accordion closed" data-id="1"><b>NIH Resources</b></a> <!--class hidden hides div id=the div that will display--> <div class="hidden" id="other-1"> <p><a title="Xenopus tropicalis sequences at the NCBI" href="http://www.ncbi.nlm.nih.gov/genome/guide/frog/" rel="ext">NIH NCBI Xenopus Resources</a><br /> <a title="NIH's progress regarding support of genomic and genetic needs for Xenopus research" href="http://www.nih.gov/science/models/xenopus/" rel="ext">NIH Xenopus Initiative</a><br /> <a title="Xenopus Gene Collection" href="http://xgc.nci.nih.gov/" rel="ext">XGC</a><br /> <a title="BLAST tropicalis seqences at NCBI" href="http://www.ncbi.nlm.nih.gov/genome/seq/BlastGen/BlastGen.cgi?taxid=8364" rel="ext">BLAST</a><br /> <a title="US National Library of Medicine" href="http://www.ncbi.nlm.nih.gov/entrez/query.fcgi?db=PubMed" rel="ext">PubMed</a><br /> <a title="Expressed Sequence Tags database" href="http://www.ncbi.nlm.nih.gov/dbEST/" rel="ext">dbEST</a> </p> </div> <a href="javascript:void(0)" class="accordion closed" data-id="2"><b>Xenopus Resources</b></a> <div class="hidden" id="other-2"> <p><a title="Explore RefSeq and Ensembl datasets of Xenopus genes over development"href="http://jason.chuang.ca/research/xenopus/" rel="ext">The Transcriptome of Xenopus tropicalis</a><br /> <a title="A Xenopus Newsletter" href="http://www.xenbase.org/other/static/xine/xine.jsp">Xine</a><br /> <a title="European Xenopus Resource Center - Portsmouth, England" href="http://www.port.ac.uk/research/exrc/" rel="ext">EXRC</a><br /> <a title="National Xenopus Resource - Woods Hole, Massachusetts" href="http://www.mbl.edu/xenopus/" rel="ext">NXR</a><br /> <a title="Searchable database of Xenopus expression from the Gurdon Institute - M Gilchrist" href="http://genomics.nimr.mrc.ac.uk/apps/XenMARK/" rel="ext">XenMARK</a><br /> <a title="microRNAs" href="http://mirbase.org/cgi-bin/query.pl?terms=xenopus&submit=Search-">MirBase</a> <a title="Axeldb site under construction - in situ images from C Niehrs and N Pollet" href="http://indigene.ibaic.u-psud.fr/ace/" rel="ext">Axeldb</a><br /> <a title="Web data catalogue of NIBB/NIG/NBRP Xenopus laevis EST project - in situ images from N Ueno" href="http://xenopus.nibb.ac.jp/" rel="ext">XDB3</a><br /> <a title="Proteomics data used to solve biomedical research problems" href="http://www.thegpm.org/" rel="ext">The Global Proteome Machine</a> </p> </div> <a href="javascript:void(0)" class="accordion closed" data-id="3"><b>Xenopus tropicalis</b></a> <div class="hidden" id="other-3"> <p><a title="Joint Genome Institute - X tropicalis sequences" href="http://genome.jgi-psf.org/xenopus" rel="ext">JGI (sequence)</a><br /> <a title="Xenopus tropicalis information from the Grainger lab" href="http://www.faculty.virginia.edu/xtropicalis/" rel="ext">trops @ U. Virginia</a><br /> <a title="Xenopus tropicalis information from the Harland lab" href="http://tropicalis.berkeley.edu/home/" rel="ext">trops @ Berkeley</a> </p> </div> <a href="javascript:void(0)" class="accordion closed" data-id="4"><b>Model Organism Databases</b></a> <div class="hidden" id="other-4"> <p><a href="http://www.metazome.net/" rel="ext">Metazome</a><br /> <a title-"Investigating the interaction of genes, genomic elements and genomes of humans and relevant model organisms" href="http://www.hugo-international.org/" rel="ext">Human Genome Organisation (HUGO)</a><br /> <a title="A curated online repository of HGNC-approved gene nomenclature" href="http://www.genenames.org/" rel="ext">HGNC - HUGO Gene Nomenclature Commitee</a><br /> <a title="Mouse Genome Informatics" href="http://www.informatics.jax.org/" rel="ext">Mouse - MGI</a><br /> <a title="Gallus Expression in Situ Hybridization Analysis" href="http://geisha.arizona.edu/geisha/" rel="ext">Chick - GEISHA</a><br /> <a title="The Zebrafish Model Organism Database" href="http://www.zfin.org/" rel="ext">Zebrafish - Zfin</a><br /> <a title="A database of Drosophila genes and genomes" href="http://flybase.bio.indiana.edu/" rel="ext">Drosophila - FlyBase</a><br /> <a title="Information concerning the genetics, genomics and biology of C. elegans and related nematodes" href="http://www.wormbase.org/" rel="ext">Nematodes - WormBase</a><br /> <a title="The home of the sea urchin genome database" href="http://www.spbase.org/SpBase/" rel="ext">Sea Urchin</a><br /> <a title="A comparative genomics platform for early branching Metazoa" href="http://www.compagen.org/" rel="ext">Hydra</a><br /> <a title="The Open Biological and Biomedical Ontologies" href="http://obofoundry.org/">OBO-Foundry</a> <a title="Metazome project organizes the proteomes of twenty-four metazoans into gene families" href="http://www.metazome.net/">Metazome</a> <a title="Linking descriptive phenotype observations across different fields of biology" href="http://phenoscape.org/" rel="ext">Phenoscape</a><br /> <a title="Provides access to information on amphibian declines, natural history, conservation, and taxonomy" href="http://amphibiaweb.org/">AmphibiaWeb</a> <a title="The Gene Index Project uses EST and gene sequences to provide an inventory of likely genes and their variants" href="http://compbio.dfci.harvard.edu/tgi/tgipage.html" rel="ext">The Gene Index Project</a><br /> <a title="Bgee is a database to retrieve and compare gene expression patterns between animal species" href="http://bgee.unil.ch/bgee/bgee" rel="ext">Bgee - gene expression evolution</a> </p> </div> </body> </html>