jQuery Slide effect slides div separately
<p>I am trying to make a simple slide effect but it is not working the way I want, please help me out. if anyone can point me in the right direction i would appreciate it.</p>

<ol>
<li><p>what I want to do is have the div slide up as one div not 2 div. when you click on a button the div slides down/up before the arrow head, I would like both the arrow head and the div to slide up/down.</p></li>
<li><p>when the user clicks on a button the other open div slides up before the clicked button div slides down.</p></li>
</ol>

<p>here is an example of my work.</p>

<p>DEMO: <a href="http://jsfiddle.net/dSCxJ/" rel="nofollow">http://jsfiddle.net/dSCxJ/</a></p>

<pre><code>&lt;div id="main_content"&gt;

              &lt;ul class="categories_list"&gt;

                  &lt;li class="animated"&gt;
                     &lt;a href="#propsal_templates" class="main_buttons"&gt;
                          &lt;span class="category_list_titles"&gt;
                              &lt;table width="150" border="0" cellspacing="0" cellpadding="0"&gt;
                                &lt;tr&gt;
                                  &lt;td height="150" align="center" valign="middle"&gt;Proposal Templates&lt;/td&gt;
                                &lt;/tr&gt;
                              &lt;/table&gt;
                          &lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;

                  &lt;li class="animated"&gt;
                     &lt;a href="#2" class="main_buttons"&gt;
                          &lt;span class="category_list_titles"&gt;
                              &lt;table width="150" border="0" cellspacing="0" cellpadding="0"&gt;
                                &lt;tr&gt;
                                  &lt;td height="150" align="center" valign="middle"&gt;Site Lists&lt;/td&gt;
                                &lt;/tr&gt;
                              &lt;/table&gt;
                          &lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;

              &lt;/ul&gt;

              &lt;div id="propsal_templates" class="document_wrapper" style="display:none;"&gt;
                      &lt;div class="chat-bubble-arrow-border1"&gt;&lt;/div&gt;
                      &lt;div class="chat-bubble-arrow1"&gt;&lt;/div&gt;
                          &lt;table width="950" border="0" cellspacing="10" cellpadding="10"&gt;
                            &lt;tr&gt;
                              &lt;td width="316" valign="middle"&gt;
                                &lt;a href="test.docx"&gt;
                                    &lt;span class="icon powerpoint_icon"&gt;&lt;/span&gt;
                                    &lt;span class="doc_name"&gt;General&lt;/span&gt;
                                &lt;/a&gt;
                              &lt;/td&gt;
                              &lt;td width="316" valign="middle"&gt;
                                &lt;a href="test.docx"&gt;
                                    &lt;span class="icon pdf_icon"&gt;&lt;/span&gt;
                                    &lt;span class="doc_name"&gt;General&lt;/span&gt;
                                &lt;/a&gt;
                              &lt;/td&gt;
                              &lt;td width="310" valign="middle"&gt;
                                &lt;a href="test.docx"&gt;
                                    &lt;span class="icon excel_icon"&gt;&lt;/span&gt;
                                    &lt;span class="doc_name"&gt;General&lt;/span&gt;
                                &lt;/a&gt;
                              &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                              &lt;td valign="middle"&gt;
                              &lt;a href="test.docx"&gt;
                                    &lt;span class="icon word_icon"&gt;&lt;/span&gt;
                                    &lt;span class="doc_name"&gt;General&lt;/span&gt;
                                &lt;/a&gt;
                              &lt;/td&gt;
                              &lt;td valign="middle"&gt;
                                &lt;a href="test.docx"&gt;
                                    &lt;span class="icon powerpoint_icon"&gt;&lt;/span&gt;
                                    &lt;span class="doc_name"&gt;General&lt;/span&gt;
                                &lt;/a&gt;
                              &lt;/td&gt;
                              &lt;td valign="middle"&gt;
                                &lt;a href="test.docx"&gt;
                                    &lt;span class="icon powerpoint_icon"&gt;&lt;/span&gt;
                                    &lt;span class="doc_name"&gt;General&lt;/span&gt;
                                &lt;/a&gt;
                              &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                              &lt;td valign="middle"&gt;
                              &lt;a href="test.docx"&gt;
                                    &lt;span class="icon word_icon"&gt;&lt;/span&gt;
                                    &lt;span class="doc_name"&gt;General&lt;/span&gt;
                                &lt;/a&gt;
                              &lt;/td&gt;
                              &lt;td valign="middle"&gt;
                                &lt;a href="test.docx"&gt;
                                    &lt;span class="icon powerpoint_icon"&gt;&lt;/span&gt;
                                    &lt;span class="doc_name"&gt;General&lt;/span&gt;
                                &lt;/a&gt;
                              &lt;/td&gt;
                              &lt;td valign="middle"&gt;

                              &lt;/td&gt;
                            &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;

              &lt;div id="2" class="document_wrapper" style="display:none;"&gt;
                      &lt;div class="chat-bubble-arrow-border2"&gt;&lt;/div&gt;
                      &lt;div class="chat-bubble-arrow2"&gt;&lt;/div&gt;
                          &lt;table width="950" border="0" cellspacing="10" cellpadding="10"&gt;
                            &lt;tr&gt;
                              &lt;td width="316" valign="middle"&gt;
                                &lt;a href="test.docx"&gt;
                                    &lt;span class="icon powerpoint_icon"&gt;&lt;/span&gt;
                                    &lt;span class="doc_name"&gt;General&lt;/span&gt;
                                &lt;/a&gt;
                              &lt;/td&gt;
                              &lt;td width="316" valign="middle"&gt;
                                &lt;a href="test.docx"&gt;
                                    &lt;span class="icon pdf_icon"&gt;&lt;/span&gt;
                                    &lt;span class="doc_name"&gt;General&lt;/span&gt;
                                &lt;/a&gt;
                              &lt;/td&gt;
                              &lt;td width="310" valign="middle"&gt;
                                &lt;a href="test.docx"&gt;
                                    &lt;span class="icon excel_icon"&gt;&lt;/span&gt;
                                    &lt;span class="doc_name"&gt;General&lt;/span&gt;
                                &lt;/a&gt;
                              &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                              &lt;td valign="middle"&gt;
                              &lt;a href="test.docx"&gt;
                                    &lt;span class="icon word_icon"&gt;&lt;/span&gt;
                                    &lt;span class="doc_name"&gt;General&lt;/span&gt;
                                &lt;/a&gt;
                              &lt;/td&gt;
                              &lt;td valign="middle"&gt;
                                &lt;a href="test.docx"&gt;
                                    &lt;span class="icon powerpoint_icon"&gt;&lt;/span&gt;
                                    &lt;span class="doc_name"&gt;General&lt;/span&gt;
                                &lt;/a&gt;
                              &lt;/td&gt;
                              &lt;td valign="middle"&gt;
                                &lt;a href="test.docx"&gt;
                                    &lt;span class="icon pdf_icon"&gt;&lt;/span&gt;
                                    &lt;span class="doc_name"&gt;General&lt;/span&gt;
                                &lt;/a&gt;
                              &lt;/td&gt;
                            &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
</code></pre>

              

<pre><code>//centers categories names
jQuery.fn.center = function(){
    this.css("position","absolute");
    this.css("top","50%");
    this.css("left","50%");
    this.css("margin-top","-"+(this.height()/2)+"px");
    this.css("margin-left","-"+(this.width()/2)+"px");
    return this;
}
$(".category_list_titles").center();

//button action
$('ul.categories_list li a.main_buttons').click(function(e) {
    e.preventDefault(); 

    var div = $(this).attr("href");
    //alert(div);

    if($(this).hasClass('selected_button'))
    {
        $(this).removeClass('selected_button');
        //$(''+div+'').fadeOut();
        $(''+div+'').slideUp(
            { 
                duration: 500, 
                easing: 'easeInQuad',
            }
        );
    }
    else
    {
      $('ul.categories_list li a.main_buttons').each(function(i) {
          $('ul.categories_list li a.main_buttons').removeClass('selected_button');
          //$('.document_wrapper').css('display', 'none');
          $('.document_wrapper').slideUp(
            { 
                duration: 500, 
                easing: 'easeInQuad',
            }
          );
      });

      $(this).addClass('selected_button');
      //$(''+div+'').fadeIn();
      $(''+div+'').slideDown(
        { 
            duration: 500, 
            easing: 'easeInQuad',
        }
      );
    }   
});
</code></pre>

<p>thanks in advance</p>
