drop-down menu JS [easy]

Question

I am making a drop-down menu for my Website but I am not a boss in JavaScript so I take a ready-made drop-down menu in Internet and I improve that. But when I would it replace my

<a href="" title="Afficher le sous-menu">Voir Plus</a> 

It work but when I click again on this links, the script no longer works.

The example here : http://jsfiddle.net/LZfY3/5/ . And the code:

CSS

        #navigation {
        margin: 0;
        padding: 0;
        color: #fff;
        width: 630px;
        font: 1.2em "Trebuchet MS", sans-serif;
        background: #ccc url(subMenu.png) 0 0 repeat-x;
        }
    #navigation .subMenuHidden, #navigation .toggleSubMenu{
        clear:both;
    }
    #navigation div.subMenuHidden a {
        padding: 3px 20px;
        float:right;
        }

JavaScript

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>

    $(document).ready( function () {
    // On cache les sous-menus
    // sauf celui qui porte la classe "open_at_load" :
    $("div.subMenu:not('.open_at_load')").hide();
    // On selectionne tous les items de liste portant la classe "toggleSubMenu"

    // et on remplace l'element span qu'ils contiennent par un lien :
    /*$("div.subMenuHidden span").each( function () {
        // On stocke le contenu du span :
        var TexteSpan = $(this).text();
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
    } ) ;*/

    // On modifie l'evenement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $("div.subMenuHidden > a").click( function () {
        // Si le sous-menu etait deja ouvert, on le referme :
        if ($(this).prev("div.subMenu:visible").length != 0) {
            $(this).prev("div.subMenu").slideUp("normal");
        }
        // Si le sous-menu est cache, on ferme les autres et on l'affiche :
        else {
            $("div.subMenu").slideUp("normal");

            $(this).prev("div.subMenu").slideDown("normal", function() {$(this).next('a').replaceWith('<a href="" title="Afficher le sous-menu">Voir Moins</a>');});

        } 
        // On empêche le navigateur de suivre le lien :
        return false;
    });

} ) ;

HTML

<ul id="navigation">
        <li class="toggleSubMenu" style="position: static;"><h2 class="toggleSubMenuH2">Images / Photos</h2>
            <div class="subMenuVis">
                <div style="height: 100px; width: 178px; background-color: aqua; margin: 10; float: left;"></div>
                <div style="height: 100px; width: 178px; background-color: aqua; margin: 10; float: left;"></div>
                <div style="height: 100px; width: 178px; background-color: aqua; margin: 10; float: left;"></div>
            </div>
            <div class="subMenuHidden"> 
                <div class="subMenu" style="display: none;">
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                </div>
                <a href="" title="Afficher le sous-menu" id="caca">voir plus</a>  
            </div>
        </li>
        <li class="toggleSubMenu" style="position: static;"><h2 class="toggleSubMenuH2">Vidéos</h2>
            <div class="subMenuVis">
                <div style="height: 100px; width: 178px; background-color: aqua; margin: 10; float: left;"></div>
                <div style="height: 100px; width: 178px; background-color: aqua; margin: 10; float: left;"></div>
                <div style="height: 100px; width: 178px; background-color: aqua; margin: 10; float: left;"></div>
            </div>
            <div class="subMenuHidden"> 
                <div class="subMenu" style="display: none;">
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                </div>
                <a href="" title="Afficher le sous-menu">voir plus</a> 
            </div>
        </li>
    </ul>    

Thanks. (sorry for mistake, I am French)

Answer 1

There is problem, your JS code bind to (click action) to items when dom is ready, your JS code not react to DOM changes. This DOM changes are retrieved your replaceWith function, easiest solution is change your replaceWith function to html and simply change a-tag content :)

$(this).prev("div.subMenu").slideDown("normal", function() {$(this).next('a').html('Voir Moins');});