RemoveClass and AddClass not Working on my SlideDown Login Panel

Question

Helo, I have this top login panel, slides down and up.

But what I need is this: when clicking div#contenido the panel slides up, but the link that says "Cerrado" does not changes to "Modulo". It always says "Cerrado".

I need when clicking div#contenido this change to "Modulo", but it always stays on "Cerrado".

I tried with AddClass() and RemoveClass() does not work.

This is my script:

<script type="text/javascript">
    $(document).ready(function () {

        // Expand Panel
        $(".open").click(function () {
            $("div#panel").slideDown("fast");

        });

        // Collapse Panel
        $(".close").click(function () {
            $("div#panel").slideUp("fast");
        });

        // Switch buttons from "Log In | Register" to "Close Panel" on click
        $(".toggle a").click(function () {
            $(".toggle a").toggle();
        });
        $("div#contenido").click(function () {
            $(".toggle a").removeClass("close").addClass("open");
        });
    });
</script>

This is my HTML

<div id="toppanel">
    <div id="panel">
        <div class="content clearfix">
        </div>
    </div>
</div>
<div class="tab">
    <ul class="login">
        <li class="left">&nbsp;</li>
        <li class="toggle">
            <a class="open"  href="#">Módulo</a>
            <a class="close" style="display: none;" href="#">Cerrar</a>
        </li>
        <li class="right">&nbsp;</li>
    </ul>
</div>
<div class="toggle">
    <div id="contenido">
        <div class="close">
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <h1>Panel Desplegable</h1>
            <br />
            <p>Un párrafo es un grupo de palabras en un texto escrito que expresa una idea o un argumento, o reproduce las palabras de una historia o la vida actual. Está compuesto por un conjunto de oraciones que tienen cierta unidad temática o que, sin tenerla, se enuncian juntas. Es un componente del texto que en su aspecto externo inicia con una mayúscula y termina en un punto y aparte. Comprende varias oraciones relacionadas sobre el mismo subtema; una de ellas expresa la idea principal. Es el conjunto de oraciones constituidas de un texto separadas por un punto y aparte y punto y seguido.</p>
        </div>
    </div>
</div>

Hope you can help me!

Thank you.

Sorry for my bad english u_u

Answer 1

You need to use

$("div#contenido").click(function () {
    $(".toggle a.open").show();
    $(".toggle a.close").hide();
});

Demo: Fiddle