Problema con slideDown

[Vendetta]

Buenas.

Estoy intentando hacer que mediante una función jQuery, un div se oculte con slideUp el que estaba activado y a continuación, muestre el clickeado con slideDown. El caso es que el slideUp funciona pero el slideDown no. He mirado otros scripts por google pero me sigue pasando lo mismo y ya no se que más hacer.

Código Javascript:

$(document).ready(function() {
        $("a.tab").click(function () { 
            $("ul li a.active").removeClass("active"); // 
            $(this).addClass("active"); 
            $("DIV.content").slideUp('slow', function() {
                var content_show = $("ul li a.active").attr("title");
                $("DIV#" + content_show).show('slow');
            });
        });
      });
 

He probado de varias formas, poniendo el slideDown fuera y dentro del slideUp (como esta ahora) y lo último que he probado es cambiando slideDown por show...Tambien he probado

Código Javascript:

var content_show = $(this).attr("title");
 

Esto, en lugar de poner todos los elementos pero sigue pasando exactamente lo mismo, no muestra ningun div. Dejo el HTML, supongo que hará falta...

Código HTML:

<div id="tabbed_box_1" class="tabbed_box">
    <h4>Titulo</h4>
    <div class="tabbed_area">       
        <ul class="tabs">
            <li><a title="content_1" class="tab active">Pestaña 1</a></li>
            <li><a title="content_2" class="tab">Pestaña 2</a></li>
        </ul>
        
        <div id="content_1" class="content">
            <ul>
                <li style="border-bottom:1px solid #d6dde0;"><a href=""><b>Autor:</b> Nick &nbsp; <b>Fecha:</b> Actual</a></li>
                <li style="padding: 5px 15px;"><a>Texto 1</a></li>
                <li style="border-bottom:1px solid #d6dde0;">
                    <a href=""><b>Autor:</b> Nick &nbsp; <b>Fecha:</b> Actual</a>
                </li>
                <li style="padding: 5px 15px;"><a>
                Texto 2</a></li>
            </ul>
        </div>
        <div id="content_2" class="content">
 
            <ul>
                <li><a href="">Texto, texto.</a></li>
            </ul>
        </div>
    </div>
</div>
 

[hades87]

Si quieres hacer dos acciones para un mismo elemento te recomiendo la función toogle que te permite aplicar dos funciones a un mismo elemento

[Vendetta]

Es que lo que yo quiero es que al hacer click, se oculte la actual y se muestre la que tiene relación a la que se clickeo...toggle solo oculta y muestra lo mismo, no? Es que tampoco soy muy entendido del javascript XD

[LionCode]

si tienes 2 elementos solos puedes hacer toggle a uno en el click y en el callback de este toggle, llamar al toggle del otro.

Otra posibilidad con un poco mas de codigo seria if($('content_2').is(':visible'){$('content_2').sl ideUp;$('content_1').slideDown;}else{$('content_1' ).slideUp;$('content_2').slideDown;}

te recomiendo mirar los filtros :visible :hidden