<script type="text/javascript">
$(document).ready(function() {
$(".codeButton").hide();
$(".codeButton").click(function() {
// get text in clicked button
var letter = $(this).text();
$(".code").hide(); // hide everything
$(".code"+letter).show(); // show only selected
});
});
</script>
<a href="#" class="codeButtonA codeButton">A</a>
<a href="#" class="codeButtonB codeButton">B</a>
<div class="glossary"><div class="codeA code">Agenda - Meeting
structure</div></div>
<div class="glossary"><div class="codeB code">Board - Panel</div></
div>
On Mar 6, 6:20 am, JP <i...@johnpaulgreen.com> wrote:
> 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>
>
> <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
