Question

I’m trying to make these jQuery commands execute later through links in html:

                $(document).ready(function(){
                    $('#2wa').click(function() {
                           $('#ownstream').hide();
                           $('#movstream').hide();                               
                           $('#2wastream').fadeIn();                               
                    });
                $(document).ready(function(){                      
                    $('#own').click(function() {
                            $('#2wastream').hide();
                            $('#movstream').hide();
                            $('#ownstream').fadeIn();
                            return false;
                    });
                $(document).ready(function(){
                    $('#mov').click(function() {
                            $('#2wastream').hide();
                            $('#ownstream').hide();                                     
                            $('#movstream').fadeIn();
                            return false;
                    });

These three selector commands are supposed to hide two items and show one when the ID on their second line is shown, but nothing happens when I click on it. The links are formatted as such:

                        <a href="test/#" id="own">  

and the elements that are shown/hidden as such:

                        <div id="ownstream"></div>

For these I have two problems: the links themselves are not causing any change to take place, and none of them are taking place when the page loads, causing all three elements to appear. How do I solve this? Also, should I be placing the jquery script in the head or below the body?

Answer 1

First of all, you are not propertly closing the $(document).ready(function(){
Second you only need one of those.. not one for each binding ..

Finally add a common class to the links, for example stream-opener

<a href="test/#" id="own" class="stream-opener"> 
<a href="test/#" id="mov" class="stream-opener"> 

and another on the elements that show/hide

<div id="ownstream" class="stream"></div>
<div id="movstream" class="stream"></div>

and use this one script

$(document).ready(function(){
   $('.stream-opener').click(function(e){
       e.preventDefault();
       var targetStream = '#' + this.id + 'stream';
       $('.stream').hide().filter( targetStream ).fadeIn();
   });
});