Динамические <div>, fadeOut() Jquery
 

Всем привет! Есть два блока <div>, две кнопки, при нажатии которых выцветает <div id="content_center"> и меняется содержимое <div id="left_column">. Знаю только как сделать через костыли. Изучаю JS недавно, подскажите как сделать правильно. Заранее спасибо.

<div id="content_center">
       //content
<div>

              <div  id="left_column">

                    <div id="about_content" style="display: none;">
                        <dl>
                            <dt>about</dt>
                            <dt>about</dt>
                        </dl>
                    </div>

                    <div id="contact_content" style="display: none;">
                        <dl>
                            <dt>contact</dt>
                            <dt>contact</dt>
                        </dl>
                    </div>

                </div>

$(document).ready(function(){
            $('#about').click(function(){                        //обработчик кнопки about
                $("#content_center").fadeOut();
                $("#contact_content").fadeOut();
                $("#about_content").delay('500').fadeIn();
            });
            $('#contact').click(function(){                     //обработчик кнопки contact
                $("#content_center").fadeOut();
                $("#about_content").fadeOut();
                $("#contact_content").delay('500').fadeIn();
            });
        });

Так а что тебя смущает? Ну да, код не очень, но для начала то сойдет.
Я бы на твоем месте использовал не кнопки, а ссылки <a href="#about">, <a href="#contact">
Обработчик тогда можно использовать один:

$('nav a').click(function(e){
    $("#content_center").fadeOut();
    $(this.hash).fadeIn().siblings().fadeOut();
    e.preventDefault();
});