Home/ Questions/Q 484013
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T01:15:22+00:00

I’m trying to get a toggle effect but not quite sure how to do

  • 0

I’m trying to get a toggle effect but not quite sure how to do it or what to look for. (i jave Jquery loaded).

assume html similar to

<table class="left-dates">
    <tr><td>All Dates</td></tr>
    <tr><td>01 dec 2009</td></tr>
    <tr><td>02 dec 2009</td></tr>   
    <tr><td>03 dec 2009</td></tr>   
    <tr><td>04 dec 2009</td></tr>   
</table>

<div class="box 01-dec-2009">
    foo
</div>

<div class="box 03-dec 2009">
    bar
</div>

<div class="box 04-dec-2009">
    foobar
</div>

Steps to take

  1. All div’s are shown
  2. Clicking on a td for a date will hide all but the div with the class of the day clicked
  3. clicking “All dates” will show everything again

any idea how i could achive this cleanly? ideally using JQuery.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is a working example with jQuery.

    Note that I had to change your div classes and td labels to remove whitespace so that the labels would be equivalent to the class-names. If you didn’t want dashes in the labels you could do string manipulation in Javascript to remove white-space or give the tds the same classname as their corresponding div and then look at the classname of the clicked td rather than its inner-text.

    <html>
<head>
    <title>jQuery hiding example</title>

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>

    <script type='text/javascript'>
        $(document).ready(function(){
            $('td').click(function() {
                var target = $(this).text();
                if (target == 'All Dates') {
                    $('div.box').show();
                } else {
                    $('div.box').hide();
                    $('div.' + target).show();
                }
            });
        });
    </script>
</head>
<body>
    <table class="left-dates">
        <tr><td>All Dates</td></tr>
        <tr><td>01-dec-2009</td></tr>
        <tr><td>02-dec-2009</td></tr>       
        <tr><td>03-dec-2009</td></tr>       
        <tr><td>04-dec-2009</td></tr>       
    </table>

    <div class="box 01-dec-2009">
        foo
    </div>

    <div class="box 03-dec-2009">
        bar
    </div>

    <div class="box 04-dec-2009">
        foobar
    </div>
</body>
</html>
    • 0