I wrote some code to display course descriptions when the course name
is clicked on. The course description is held in an html file. That
part of the code works fine.
Now I'm trying to add a link with the id #toggle to either show all
the course descriptions or hide them all. All I've been able to do so
far is change the link words, but that's only on the first click. Any
help would be appreciated. I'm very new to jQuery and JavaScript.
Does anyone have any example code for showing and hiding that might be
similar to what I'm trying to do?
/*
jQuery to show the course description when the course name is
clicked
*/
$(document).ready(function(){
// On load, hide sub levels
$("div .cLevel2").hide();
// on click, show the course description
$(".cLevel1 a").click(function(){
$(this).parent().next().load($
(this).attr("href")).slideToggle("fast");
return false;
});
// on click of "show all" link, expand or collapse all .clevel2
descriptions
$("#toggle").click(function(){
$(this).text("hide all");
//$("div .cLevel2").show();
//$
(div .cLevel2).parent().next().load(.attr("href")).slideToggle("fast");
});
});
______________________
HTML
<p>(<a id="toggle" href="#">show all</a>)</p>
<div class="wrapper">
<div class="cLevel1"><a href="ClassDescrip1.html"> <span
class="cNum">PARA 100</span> <span class="cName">Introduction to
Paralegal Studies</span> <span class="cUnits">3</span> </a> </div>
<div class="cLevel2">
<p>this is level 2</p>
</div>
<div class="cLevel1"><a href="ClassDescrip1.html"> <span
class="cNum">BOT 100-120</span> <span class="cName">Introduction to
Paralegal Studies</span> <span class="cUnits">3</span> </a> </div>
<div class="cLevel2">
<p>this is level 2</p>
</div>
<div class="cLevel1"><a href="ClassDescrip1.html"> <span
class="cNum">PARA 100</span> <span class="cName">Introduction to
Paralegal Studies</span> <span class="cUnits">3</span> </a> </div>
<div class="cLevel2">
<p>this is level 2</p>
</div>
</div>