[jQuery] Re: click on a link and have a table appear - can't get it to work

[Rick Faircloth]

Let's make a few adjustments to your code and see what happens...

First (and something I used to forget when I first started), do you
have your jquery referenced in the head section of your document?

<script src="jquery-1.2.2.pack.js" type="text/javascript"></script>

Now, the jquery... try this:

        $(document).ready(function() {
                $('#col1').hide();
                $('#btn-slide').click(function() {
                $('#col1').toggle('slow');
                return false;
                });
        });

Above, added the second line to initially hide the table with id="col1".
Also, I changed the "show" function to "toggle" so the table with
show or hide depending on its state when clicked.

Now, on the link, we need to fix up your mark-up a little.  Try this:

        <ul class="categoryitems">
                <li><a id="btn-slide" href="#">Schedule</a></li>
        </ul>

And here's the simple table I created to test the function:
        
        <table id="col1" width="200" border="1">
                <tr>
                        <td>Table col1</td>
                        <td>&nbsp;</td>
                </tr>
        </table>

I tested it in IE7 and FF2.  The table's not beautiful, but at leat it proves
the code works.  Let me know if you have any more questions!  :o)

Rick



> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of ktpmm5
> Sent: Saturday, April 05, 2008 9:10 AM
> To: jQuery (English)
> Subject: [jQuery] click on a link and have a table appear - can't get it to 
> work
> 
> 
> I'm a newbie to jquery, so no flames please...I have a basic 3 column
> web
> page - nav, center and left.  That works great.  My left column is
> navigation.  When I click on a link on the left nav pane, I want a
> basic
> table to appear in the center and right panes - not even getting
> anything
> from a database, just displaying a schedule table.  It seems pretty
> easy but
> I must be doing something wrong.  Here is my jquery js:
> 
>          $(document).ready(function()  {
>             $('#btn-slide').click(function()  {
>             $("#col1").show('slow');
>             return false;
>              })
>            })
> 
> Here is my nav stuff:
>   ....
>   <ul class = categoryitems">
>   <li> #  id="btn-slide">Schedule </li>
> 
> 
> .... Later in the code is the middle column that I want replaced with
> the
> new material when the user clicks on a nav link:
>   <div class="col1" id="col1">
>      blah, blah...
>   </div>
> 
> What am I doing wrong?