The HTML markup for a wijTabs widget looks like this.
Drop down to view markup
Markup |
Copy Code
|
<h3>Protein Translation Process</h3>
<p>The translation process is divided into three steps:</p>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Step 1</a></li>
<li><a href="#tabs-2">Step 2</a></li>
<li><a href="#tabs-3">Step 3</a></li>
</ul>
<div id="tabs-1">
<p>
<strong>Initiation</strong>: When a small subunit of a ribosome charged with a tRNA+the amino
acid methionine encounters an mRNA, it attaches and starts to scan for a start signal. When
it finds the start sequence AUG, the codon (triplet) for the amino acid methionine, the large
subunit joins the small one to form a complete ribosome and the protein synthesis is initiated.
</p>
</div>
<div id="tabs-2">
<p>
<strong>Elongation</strong>: A new tRNA+amino acid enters the ribosome, at the next codon
downstream of the AUG codon. If its anticodon matches the mRNA codon it basepairs and the
ribosome can link the two aminoacids together.(If a tRNA with the wrong anticodon and
therefore the wrong amino acid enters the ribosome, it can not basepair with the mRNA and
is rejected.) The ribosome then moves one triplet forward and a new tRNA+amino acid can enter
the ribosome and the procedure is repeated.</p>
</div>
<div id="tabs-3">
<p><strong>Termination</strong>: When the ribosome reaches one of three stop codons, for example
UGA, there are no corresponding tRNAs to that sequence. Instead termination proteins bind to the
ribosome and stimulate the release of the polypeptide chain (the protein), and the ribosome
dissociates from the mRNA. When the ribosome is released from the mRNA, its large and small
subunit dissociate. The small subunit can now be loaded with a new tRNA+methionine and start
translation once again. Some cells need large quantities of a particular protein. To meet this
requirement they make many mRNA copies of the corresponding gene and have many ribosomes working
on each mRNA. After translation the protein will usually undergo some further modifications
before it becomes fully active.</p>
</div>
</div> |
You can initialize the widget with the following jQuery script.
Drop down to view script
Script |
Copy Code
|
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").wijtabs();
});
</script> |
The markup and script featured here results in the following live widget. Click a tab to see its content.
See Also
Concepts
Reference