SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool Hide/Show glossary page 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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    If you place the links in their own container, a paragraph tag is enough, you can then iterate over all of the links and hide them, except for the one that was clicked which you then show.

    It amounts to just a few lines of jQuery.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Here's some sample code that demonstrates that, when the code is well structured, what can be done with just a little jQuery.

    Code javascript:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Test</title>
    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"> </script>
    <script type="text/javascript">
    $(function() {
    	$('#glossaryLinks a').click(function () {
    		$('#glossary [id^=glossary]').hide();
    		$('#glossary ' + $(this).attr('href')).show();
    		return false;
    	});
    	$('#glossaryLinks a:first').click();
    });
    </script>
    </head>
    <body>
    <h1>Website Name</h1>
    <h2>Glossary</h2> 
    <p id="glossaryLinks">
    	<a href="#glossaryA">A</a>
    	<a href="#glossaryB">B</a> 
    	<a href="#glossaryC">C</a> 
    	<a href="#glossaryD">D</a> 
    	<a href="#glossaryE">E</a> 
    	<a href="#glossaryF">F</a> 
    	<a href="#glossaryG">G</a> 
    	<a href="#glossaryH">H</a> 
    	<a href="#glossaryI">I</a> 
    	<a href="#glossaryJ">J</a> 
    	<a href="#glossaryK">K</a> 
    	<a href="#glossaryL">L</a> 
    	<a href="#glossaryM">M</a> 
    	<a href="#glossaryN">N</a> 
    	<a href="#glossaryO">O</a> 
    	<a href="#glossaryP">P</a> 
    	<a href="#glossaryQ">Q</a> 
    	<a href="#glossaryR">R</a> 
    	<a href="#glossaryS">S</a> 
    	<a href="#glossaryT">T</a> 
    	<a href="#glossaryU">U</a> 
    	<a href="#glossaryV">V</a> 
    	<a href="#glossaryW">W</a> 
    	<a href="#glossaryX">X</a> 
    	<a href="#glossaryY">Y</a> 
    	<a href="#glossaryZ">Z</a> 
    </p>
    <div id="glossary">
    	<div id="glossaryA">
    		<p>Agenda - Meeting structure</p>
    	</div>
    	<div id="glossaryB">
    		<p>Board - Panel</p>
    	</div>
    	<div id="glossaryC">
    		<p>C - </p>
    	</div>
    	<div id="glossaryD">
    		<p>D - </p>
    	</div>
    	<div id="glossaryE">
    		<p>E - </p>
    	</div>
    	<div id="glossaryF">
    		<p>F - </p>
    	</div>
    	<div id="glossaryG">
    		<p>G - </p>
    	</div>
    	<div id="glossaryH">
    		<p>H - </p>
    	</div>
    	<div id="glossaryI">
    		<p>I - </p>
    	</div>
    	<div id="glossaryJ">
    		<p>J - </p>
    	</div>
    	<div id="glossaryK">
    		<p>K - </p>
    	</div>
    	<div id="glossaryL">
    		<p>L - </p>
    	</div>
    	<div id="glossaryM">
    		<p>M - </p>
    	</div>
    	<div id="glossaryN">
    		<p>N - </p>
    	</div>
    	<div id="glossaryO">
    		<p>O - </p>
    	</div>
    	<div id="glossaryP">
    		<p>P - </p>
    	</div>
    	<div id="glossaryQ">
    		<p>Q - </p>
    	</div>
    	<div id="glossaryR">
    		<p>R - </p>
    	</div>
    	<div id="glossaryS">
    		<p>S - </p>
    	</div>
    	<div id="glossaryT">
    		<p>T - </p>
    	</div>
    	<div id="glossaryU">
    		<p>U - </p>
    	</div>
    	<div id="glossaryV">
    		<p>V - </p>
    	</div>
    	<div id="glossaryW">
    		<p>W - </p>
    	</div>
    	<div id="glossaryX">
    		<p>X - </p>
    	</div>
    	<div id="glossaryY">
    		<p>Y - </p>
    	</div>
    	<div id="glossaryZ">
    		<p>Z - </p>
    	</div>
    </div>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •