jQuery slideUp while sibling div slideDown

Question

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/

Answer 1

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/

Answer 2

Check this DEMO : http://jsfiddle.net/4ae6afmj/5/

JQUERY

(function ($) {
    $(document).ready(function () {
        $('.toggler h3').click(function () {
            $('.togglecontent').slideUp();
            if($(this).siblings('div').css('display') === 'none')
                $(this).siblings('div').slideDown();
            else
                $(this).siblings('div').slideUp();
        });
    });
})(jQuery);

Answer 3

use can use .not()

    (function($) {
    $(document).ready(function() {
        $('.toggler h3').click(function() {
            $('.togglecontent').not($(this).closest('.toggler').find(' .togglecontent')).slideUp(0);
          $(this).closest('.toggler').find('.togglecontent').slideToggle();   
        });
    });
})(jQuery);

DEMO

and you can use

(function($) {
    $(document).ready(function() {
        $('.toggler h3').click(function() {
            var thisContent = $(this).closest('.toggler').find(' .togglecontent');
            $('.togglecontent').not(thisContent).slideUp(0);
            thisContent.slideToggle();   
        });
    });
})(jQuery);

DEMO