[jQuery] Hide/Show glossary page require for website using jQuery
Hi There
I am trying to implement a glossary page (A-Z) for a website.
Basically when I user clicks a letter e.g A all the glossary terms
listed under A will appear below and all other glossary terms will be
hidden. I have a very simple working version below, but at the moment
I am having to manaully hide all other elements when a particular
glossary term is clicked. I presume there is a easier way , maybe
using a loop of some sort, but being new to jQuery I am struggling a
littel. Has anyone done something similar before? any help would be
greatly appreciated.
<script type="text/javascript">
$(document).ready(function() {
$(".codeA").hide();
$(".codeB").hide();
});
</script>
<strong>Glossary</strong>
<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