<div id="content_text">
<div id="column1">
<!-- begin left column -->

<h3 class="hidden"> Reveal In Text: </h3>

<ul>
<li><a href="#" class="cla_show"> Show Class Questions </a></li>
<li><a href="#" class="com_show"> Show Commentaries </a></li>
<li><a href="#" class="dic_show"> Show Dictionary Words </a></li>
<li><a href="#" class="stu_show"> Show Student Projects </a></li>
<li><a href="#" class="the_show"> Show Themes </a></li>
</ul>

<div id="choices_scroll">

<ul class="cla">
<li> <a href="#"> Class Questions Choice 1 </a> </li>
<li> <a href="#"> Class Questions Choice 2 </a> </li>
<li> <a href="#"> Class Questions Choice 3 </a> </li>
</ul>

<ul class="com">
<li> <a href="#"> Commentaries Choice 1 </a> </li>
<li> <a href="#"> Commentaries Choice 2 </a> </li>
<li> <a href="#"> Commentaries Choice 3 </a> </li>
</ul>

<ul class="dic">
<li> <a href="#"> Dictionary Words Choice 1 </a> </li>
<li> <a href="#"> Dictionary Words Choice 2 </a> </li>
<li> <a href="#"> Dictionary Words Choice 3 </a> </li>
</ul>

<ul class="stu">
<li> <a href="#"> Student Projects Choice 1 </a> </li>
<li> <a href="#"> Student Projects Choice 2 </a> </li>
<li> <a href="#"> Student Projects Choice 3 </a> </li>
</ul>

<ul class="the">
<li> <a href="#"> Themes Choice 1 </a> </li>
<li> <a href="#"> Themes Choice 2 </a> </li>
<li> <a href="#"> Themes Choice 3 </a> </li>
</ul>

<script type="text/javascript">
//we define two arrays, containing our toggles and divs.
var myDivs = document.getElementsByClassName('cla');
var myLinks = document.getElementsByClassName('cla_show');

//then we create the effect.
var myAccordion = new fx.Accordion(myLinks, myDivs, {opacity: true});
</script>

</div>

<div id="print"> <a href="javascript:window.print()"> Print Commentary </a> </div>

<!-- end left column -->
</div>