Search code examples
javascriptjqueryslidetoggleslidedownslideup

jQuery slideUp while sibling div slideDown


I need to make sure only one of the .togglecontent divs show up at once, so when one slides down the other should slide up.

Here is what I have so far

(function($) {
    $(document).ready(function() {
        $('.toggler h3').click(function() {
          var currentContent = $(this).siblings('.togglecontent');
          $('.togglecontent').not(currentContent).slideUp();
          currentContent.slideToggle();
        });
    });
})(jQuery);

<div class="toggler-wrap">
  <div class="toggler">
    <h3><span class="fa fa-angle-double-right"></span> What I offer employees</h3>
    <div class="togglecontent">
      I have extensive experience litigating a full range of employment claims:
      <ul>
        <li>discrimination, harassment, retaliation, and wrongful termination</li>
        <li>claims involving disability, religious, and pregnancy accommodations</li>
        <li>California’s complex leave laws</li>
        <li>the California Fair Employment and Housing Act (FEHA)</li>
        <li>the California Family Rights Act (CFRA)</li>
        <li>the Pregnancy Disability Leave Law (PDLL)</li>
        <li>Title VII</li>
        <li>the Family and Medical Leave Act (FMLA)</li>
        <li>the Americans with Disabilities Act (ADA)</li>
        <li>invasion of privacy claims under California law</li>
      </ul>
    </div>
  </div>
  <div class="toggler">
    <h3><span class="fa fa-angle-double-right"></span> Consulting services for business</h3>
    <div class="togglecontent">
      For your business, prevention is the key to successful employment practices. I have years of experience helping businesses comply with federal and California employment laws, as well as those in other states.
      <ul>
        <li>I counsel business on a wide range of policies:
          <ul>
            <li>leaves of absence
              <li>disability accommodation
                <li>hiring and dismissal decisions
                  <li>performance management, policies and handbooks, and
                    <li>background checks.
          </ul>
          <li>I’ve conducted nearly 100 workplace training sessions on a wide range of subjects.
            <li>If a problem arises, I can give you an independent evaluation.
              <li>I’ve also conducted hundreds of workplace investigations.
      </ul>
    </div>
  </div>
</div>

Here is a demo http://jsfiddle.net/4ae6afmj/


Solution

  • You can do something like this

    $('.toggler h3').click(function() {
      var currentContent = $(this).siblings('.togglecontent');
      $('.togglecontent').not(currentContent).slideUp(); // <--- slide up all other .togglecontent except the current one
      currentContent.slideToggle();
    });
    

    Here is a demo http://jsfiddle.net/dhirajbodicherla/4ae6afmj/3/