jquery - プラス/マイナスのトグル機能を備えたスライド メニュー

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>

Jクエリコード

 $(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());
       }
    });
 });

ここにデモのリンクがあります。