Help with jQuery

Hightower · 06-23-2009, 10:09 AM

I've just started looking at JQuery today and I have made the following 'simple' script to play with:

html4strict Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#hidefixtures').click(function(event){
                event.preventDefault();
                $('#fixtures').slideUp("slow");
            });
        }); 
    </script>
</head>
<body>
<div id="hidefixtures">
    <a href="">Hide/Show</a>
</div>

<div id="fixtures">
    <table width="200px" border="1px" cellpadding="3px">
        <tr>
            <td align="center" colspan="3">Date</td>
        </tr><tr>
            <td>Home team</td>
            <td>v</td>
            <td>Away team</td>
        </tr>
    <table>
</div>

<div>
    <a href="">Hide/Show something else</a>
</div>
</body>
</html>

Basically there are three elements. 1 & 3 are little links. I want element 2 to be hidden when element 1 is clicked, and then reshown when element 1 is clicked again.

This is the first time I have looked at JQuery (or any kind of JScript) so any help would be appreciated.

With the script at the minute, it hides element 2 but also element 3 which I don't want it to do.