Show/hide vocabulary lists

With this starter code we make an interactive vocabulary list that will be used for each chapter of our text. Initially students are shown just the list, but by clicking the button, they can see either English definitions, Esperanto definitions, or both.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="http://bazaesperanto.com/css/baza.css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="http://bazaesperanto.com/js/baza.js"></script>
        <script>
            $(document).ready(function() {
                $(".endef").hide();
                $(".eodef").hide();
                
                $("#entoggle").click(function(){
                    $(".endef").toggle();
                });
                
                $(".edef").hide();
                $("#eotoggle").click(function(){
                    $(".eodef").toggle();
                });
            });
        </script>

        <style type="text/css">    

        </style>
    </head>
    <body>
        <h1>Esperanto Vocabulary for Chapter xx</h1>
        <button id="entoggle">Toggle English Definitions</button>
        <button id="eotoggle">Toggle Esperanto Definitions</button>

        <dl>
            <dt title="Granda muzika blovinstrumento, kun tuboj, klavaroj k pedalaro, uzata precipe en preĝejoj">orgeno</dt>
            <dd class="endef">- organ</dd>
            <dd class="eodef">Granda muzika blovinstrumento, kun tuboj, klavaroj k pedalaro, uzata precipe en preĝejoj</dd>
            <dt>katedra</dt>
            <dd class="endef">- cathedral</dd>
            <dd class="eodef">chefpreĝajo</dd>
        </dl> 
    </body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s