JavaScriptでのアコーディオンメニュー

前提

JavaScriptを使用したアコーディオンメニューの実装

実現したいこと

pcメインで制作しているサイトのメガメニューを、sp表示の際にハンバーガーメニューにしており、JavaScriptでのアコーディオンメニューを実装したいと考えております。
対象の要素（<a href="" class="lower__item">）をクリック時に、要素（<div class="dropdown">）にクラス名の着脱をすることによって、アコーディオンメニューの表示・非表示を切り替えたいです。

発生している問題・エラーメッセージ

アコーディオンメニューが開いた瞬間に、Browsersync:connected と表示され、一瞬でハンバーバーメニューごと閉じてしまいます。（勝手にリロードが行われているのでしょうか？）
JavaScriptに慣れておらず何時間も費やしてしまっているので、お力添えをいただけますと幸いです。

該当のソースコード

headerの記述量が多いため、一部を抜粋しています。

<button class="header__hamburger hamburger" id="js-hamburger">
   <span></span>
   <span></span>
   <span></span>            
</button>

<div class="l-header__lower" id="js-nav">
            <ul class="l-header__list">
                <li>
                    <a href="" class="lower__item">企業情報<span class="c-icon_open"></span></a>
                    <div class="dropdown">
                        <div class="dropdown__inner">
                            <div class="dropdown__list">
                                <div class="dropdown__item">
                                    <p class="dropdown__title">メッセージ</p>
                                    <div>
                                        <a href="#">CEOメッセージ</a>
                                        <span class="c-icon arrow-right"></span>
                                    </div>
                                    <div>
                                        <a href="#">会長メッセージ</a>
                                        <span class="c-icon arrow-right"></span>
                                    </div>
                                </div>   
                                <div class="dropdown__item">
                                    <p class="dropdown__title">基本理念 / WORLD VISION</p>
                                    <div>
                                        <a href="#">基本理念 / WORLD VISION</a>
                                        <span class="c-icon arrow-right"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
<!--本来は同じ構造の<li>タグがこの後も続きます-->
          </ul>
        </div>
    </div>

.header__hamburger { width: 25px; height: 100%;}
    .hamburger{z-index: 1; margin-left: 16px;
        span {width: 100%; height: 2px; position: relative; transition: ease .4s; display: block; background-color: #111111;
            &:nth-child(1){top: 0;}
            &:nth-child(2){margin: 4px 0;}
            &:nth-child(3){top:0;}
        }
        &.is-active{
            span:nth-child(1){top:5px; transform: rotate(45deg);}
            span:nth-child(2){opacity: 0;}
            span:nth-child(3){top:-6.5px; transform: rotate(-45deg);}
        }
    }

.l-header__lower{display: none;
        &.is-active{display: block; padding: 0; background-color: #fff; transform: translateX(0);
            .l-header__list{display: block;
                &:first-child{@include border-top;}
                li{margin: 0;  padding: 0;
                    .lower__item{position: relative; display:inline-block; font-size: $font_m_vw; font-weight: normal; @include border-bottom; padding: 16px 10px; width: 100%;}
                }
                a:not(.lower__item),p:not(.dropdown__title){padding: 16px 0;}
            }
        }
    }

    .dropdown{ background-color: #EDEDED; box-shadow: none; display: block; position: static; padding: 0; line-height: 0; height: 0; overflow: hidden; opacity: 0; transition-duration: .4s;
        &__inner{padding: 0;}
        &__list{display: block; padding-top: 0;}     
        &__item{width: auto;
            div{padding-left: 42px;}
        }
        &__title{font-weight: normal; font-size: $font_s_vw; @include border-bottom; padding: 16px 0 16px 16px;}
        &.is-open{line-height: normal; height: auto; opacity: 1; }
            
        
    }


//ハンバーガーメニュー
var ham = document.querySelector("#js-hamburger"); 
var nav = document.querySelector("#js-nav"); 

ham.addEventListener("click", function () { 
  ham.classList.toggle("is-active"); 
  nav.classList.toggle("is-active"); 
});

// アコーディオンメニュー
var acco = document.querySelectorAll(".lower__item");
function accordion() {
  var content = this.nextElementSibling;
  content.classList.toggle("is-open");
};
for (let i = 0; i < acco.length; i++) {
  acco[i].addEventListener("click", accordion);
};