带有加/减切换功能的滑动菜单

Question

我有滑动切换菜单，点击后会打开隐藏的div。 h4标签中有4个标题，在div中有自己的描述，div是隐藏的。因此，当用户点击标题时，隐藏的div会向下滑动并显示内容。现在我需要一个正/负切换，以便用户可以理解标题下的内容。这是我的代码

 <div class="getInsSection">
    <!--Start sec1-->
    <div class="sec1">
        <h4>HEADING 1 <span>-</span></h4>
      <div class="hideit first">
        <p>
            Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
        </p>
      </div>
    </div>
    <!--End sec1-->

    <!--Start sec2-->
    <div class="sec2">
        <h4>HEADING 2</h4>
      <div class="hideit">
        <p>
            Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
        </p>
      </div>
    </div>
    <!--End sec2-->

    <!--Start sec3-->
    <div class="sec3">
        <h4>HEADING 3</h4>
      <div class="hideit">
        <p>
            Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
        </p>
      </div>
    </div>
    <!--End sec3-->

    <!--Start sec4-->
    <div class="sec4">
        <h4>HEADING 4</h4>
      <div class="hideit">
        <p>
            Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
        </p>
      </div>
    </div>
    <!--End sec4-->

  </div>

Jquery代码

 $(window).load(function () {
    $('.first').show();
 });
 $(document).ready(function (){
    $('.hideit').hide();
    $('div:has(".hideit")').find('h4').click(function() {
       var elem = $(this).next('.hideit');
       if (elem.is(':visible')) {
           elem.slideUp();
       } else {
           ($('.hideit').slideUp()) (elem.slideDown());
       }
    });
 });

以下是演示的link。