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>
