Collapse accordian branch before expanding another?

Question

I have been working on someone else's webpage that has an accordian.

Their relevant JQuery code portion is:

 $(document).ready(function () {
            $(".accordion").on("click", ".trigger", function (n) {
                var t, i;
                n.preventDefault();
                t = $(this).parent();
                t.hasClass("open") ? t.find(".content").animate({ height: 0 }, 500, function () { t.removeClass("open") }) :
                    ($(".open .content").animate({ height: 0 }, 500, function () { $(this).parents(".open").removeClass("open") }),
                        i = t.find(".inner").height(), t.find(".content").animate({ height: i }, 500, function () { t.addClass("open"); $(this).height("auto") }))
            })
        });

I know I haven't uploaded the HTML (there's quite a lot) but I was hoping someone might be able to tell me how the jQuery code could be amended so any open branch collapses before the clicked one opens (only one is currently ever allowed to be open at a time).

As present, because the branches contain a whole lot of images and text, the new branch isn't opening at the top of its content but rather for example half way down. I can see that if I manually collapse the previously opened branch first then open the new one, it all appears fine. So I thought if the code could be changed to close the old branch first it would have the scroll position of the new branch content correctly at located its top.

UPDATE 1: Here's an HTML extract from the first branch which is opened on page load and contains a video.

<ul class="accordion">
                <!-- Question 1 Start -->
                <li class="open">
                    <div class="trigger dvQuestionTitleTable dvQuestion1 dvQuestionAlignment">
                        <div id="dvIDQuestion1" class="dvQuestionTitleRow" onclick="fJTogglePlusMinus(1)">
                            <div class="theme-agent-heading-sub dvQuestionTitleTextCell">
                                Video
                            </div>
                            <div id="dvIDPlusMinusImage1" class="dvQuestionTitleImageCell">
                                <img id="Image1" src="../../common/images/icons/icon-help-minus.svg" class="imgMinus">
                            </div>
                        </div>
                    </div>
                    <div class="dvTopHorizontalLineArea">
                        <div class="dvHRLine">
                        </div>
                    </div>
                    <div class="content">
                        <div class="inner">
                            <div class="theme-help-answer">
                                <div class="dvVideoContainer1">
                                    <video loop="" playsinline="" id="Video100" width="100%" controls="" poster="/pages/agent/resources/video/images/video-100-poster-image.jpg">
                                        <source src="video/video-100.webm" type="video/webm">
                                        <source src="video/video-100.mp4" type="video/mp4">
                                    </video>
                                </div>

Answer 1

To test - added: .delay(500)

    $(document).ready(function() {
    $(".accordion").on("click", ".trigger", function(n) {
        var t, i;
        n.preventDefault();
        t = $(this).parent();
        t.hasClass("open") ? t.find(".content").animate({
                height: 0
            }, 500, function() {
                t.removeClass("open")
            }) :
            ($(".open .content").animate({
                    height: 0
                }, 500, function() {
                    $(this).parents(".open").removeClass("open")
                }),
                i = t.find(".inner").height(), t.find(".content").delay(500).animate({
                    height: i
                }, 500, function() {
                    t.addClass("open");
                    $(this).height("auto")
                }))
    })
});

Answer 2

Try using slideUp and slideDown. Also, may not need to check t.hasClass("open") as your intention is to close all accordions first and open the selected one.

$(document).ready(function() {
  $(".accordion").on("click", ".trigger", function(n) {
    var t, i;
    n.preventDefault();
    t = $(this).parent();

    if (t.hasClass("open")) { // check if the el is opened; need to close the el
      t.find(".content").slideUp('fast', function() {
        $(".accordion").removeClass("open")
      });
      return;
    } else {
      $(".open .content").slideUp('fast', function() {
        $(".accordion").removeClass("open")
      });
    }
    t.find(".content").slideDown('fast', function() {
      t.addClass("open");
    });

  });
});