TalkPHP - View Single Post

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.

06-23-2009, 10:09 AM	#1 (permalink)
Hightower The Acquainted Join Date: May 2009 Location: Durham, UK Posts: 134 Thanks: 9	Help with jQuery 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. __________________ Hightower's Softpolio