one button works , others dont , same script

Question

Ok i got this situation

        <div id="container">
        <img src="images/4.png" />
        <ul class="menu">
            <li id="menu-0"> <p class="menuP" id="button0">                                                 </p></li>
            <li id="menu-1"> <p class="menuP" id="button1"> <a id="abutton1" onclick="animatedown1()">  </a></p></li>
            <li id="menu-2"> <p class="menuP" id="button2"> <a id="abutton2" onclick="animatedown2()">  </a></p></li>
            <li id="menu-3"> <p class="menuP" id="button3"> <a id="abutton3" onclick="animatedown3()">  </a></p></li>
            <li id="menu-4"> <p class="menuP" id="button4"> <a id="abutton4" onclick="animatedown4()">  </a></p></li>
            <li id="menu-5"> <p class="menuP" id="button5">                                                 </p></li>
        </ul>
    </div> 
    <div id="bgRepeat1"> 
        <div class="textContainer" id="textContainer1">  <!-- only one of these is visible at any given time -->                      
            <p> container 1 </p>
        </div>
        <div class="textContainer" id="textContainer2">
            <p> container 2 </p>
        </div>
        <div class="textContainer" id="textContainer3">
            <p> container 3 </p>
        </div>
        <div class="textContainer" id="textContainer4">
            <p> container 4 </p>
        </div>
    </div>

and this is the javascript i got for this

function animatedown1()
{
    alert('start1');
    $("#textContainer1").animate({  
        opacity:'0'
        },800, function(){
        alert('end1');});
}

it works in this 1st example , but it wont work in any other

function animatedown2()
{
    alert('start2');
    $("#textContainer2").animate({  
        opacity:'0'
        },800, function(){
        alert('end2');});
}

i think there is no need to post the other 2 ( animatedown3 and 4 )

ok so ... the basic idea is: i have 4 buttons , they are listed ( button0 and button5 don't do anything they are just listed) On click for example button1 , textcontainer1 should be shown and hide any that was shown before

basically an animated menu with no links to other pages , all in one page.

Now it works only if i click button1 , it hides textcontainer1(i know it should show it , this here is just to see if the button works) ,and that's good . The problem is here : when i click button2,3 or 4 nothing happens , i have implemented alert() in those buttons so i can see if the script kicks in but it just doesn't start , it works only for button1

all 4 functions are almost identical , but if i found out that if i switch in animatedown1() the part $("#textContainer1") with $("#textContainer2") it works for textContainer2 .. so that makes me think that for some reason only the first function works.

Any help would be greatly appreciated.

PS: I tried making this with

$("#menu-1").click(function() {
    $("#textContainer1").animate({
        opacity:'0'
        },800, function(){
        alert('wtf');});
    });

but in here i cant make it register my click on menu-1 ( also tried with the ID's button2 and abutton2 ) Any solution with .click or with a onclick function would appreciated.

http://www.byforthewind.hit.bg/

EDIT : I found what was wrong ... when i checked my javascript i saw that just below all 4 functions , there were another 3 ( except the 1st ) with the same name but empty . That's why only the 1st function worked , the other 3 were overwritten by the empty ones on the bottom of the page.

Answer 1

I think the best way to resolve this is to make a reuse of the same function. Check the code here and tell me if it resolved your problem.

<div id="container">

    <ul class="menu">
        <li id="menu-0"><p class="menuP" id="button0"></p></li>
        <li id="menu-1"><p class="menuP" id="button1"><a id="abutton1" onclick="animateContainer($('#textContainer1 p'))">container 1 </a></p></li>
        <li id="menu-2"><p class="menuP" id="button2"><a id="abutton2" onclick="animateContainer($('#textContainer2 p'))">container 2 </a></p></li>
        <li id="menu-3"><p class="menuP" id="button3"><a id="abutton3" onclick="animateContainer($('#textContainer3 p'))">container 3 </a></p></li>
        <li id="menu-4"><p class="menuP" id="button4"><a id="abutton4" onclick="animateContainer($('#textContainer4 p'))">container 4 </a></p></li>
        <li id="menu-5"><p class="menuP" id="button5"></p></li>
    </ul>
</div>
<div id="bgRepeat1">
    <div class="textContainer" id="textContainer1">  <!-- only one of these is visible at any given time -->
        <p> container 1 </p>
    </div>
    <div class="textContainer" id="textContainer2">
        <p> container 2 </p>
    </div>
    <div class="textContainer" id="textContainer3">
        <p> container 3 </p>
    </div>
    <div class="textContainer" id="textContainer4">
        <p> container 4 </p>
    </div>
</div>

<script type="text/javascript">
    function animateContainer(container)
    {
        container.animate( { opacity :0 }, 800, function() { console.log("ended") } );
    }
</script>

How does this work?

Well - instead of copy-pasting the same function again and again, I wrote the function once and I am passing the container I want to animate.

Instead of writing function animatedown1() and function animatedown2() and so on and on, I wrote a single function with the following signature function animateContainer(container) - as you can see I pass the function which element I want to animate. This way I can reuse the same function again and again for any number of containers I want.