jquery real simple accordion sample code

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>





 

 

Leave a Reply

Your email address will not be published. Required fields are marked *