Hide/Show Glossary page required for website using jQuery

Hide/Show Glossary page required for website using jQuery

Hi There

I need to create a ‘Glossary’ page for a website using jQuery. Basically a user will click a letter i.e A,B,C,D, etc. etc and once clicked the corresponding glossarys will be displayed, while all other glossary terms will be hidden. I have implemented a very simple version before that works, however I believe I can achieve the same result by using a loop or something like that i.e for each letter give it an ID then only show the corresponding glossary terms if clicked. I am quite new to jQuery so really don’t know where to start. Currently I am having to hide all the other glossarys when one is clicked (see code below), which isn’t very efficient. Has anyone done anything similar to this before? Any code snippets that might give me a starter on this? Any help would be greatly appreciated. Here is my current working version:


<script type="text/javascript">

$(document).ready(function() {
$(".codeA").hide();
$(".codeB").hide();

});
</script>

<p><strong>Glossary</strong></p>

<a href="#" class="codeButtonA">A</a>
<a href="#" class="codeButtonB">B</a>

<div class="glossary"><div class="codeA">Agenda - Meeting structure</div></div>
<div class="glossary"><div class="codeB">Board - Panel</div></div>
</div>



<script>
// JavaScript Document

$(document).ready(function(){

//show code example A
$("a.codeButtonA").click(function(){
$(".codeA").show();
$(".codeB").hide();
return false;});

//show code example B
$("a.codeButtonB").click(function(){
$(".codeB").show();
$(".codeA").hide();
return false;});


});
</script>

Many thanks in advance