Переключить сворачиваемое содержимое JQuery / JS

Question

для проекта. Я решил использовать сворачиваемые элементы, которые находятся в разделах div, которые контролируются меню выбора (также известным как раскрывающийся список). Таким образом, пользователь будет использовать раскрывающийся список, чтобы выбрать topi c, и в зависимости от того, какой topi c он выберет, будет показан соответствующий div, который содержит серию складных переключателей. Каждый переключатель - это вопрос. Когда пользователь щелкает по нему, его содержимое div отображается или скрывается.

Мой раскрывающийся список работает нормально, но кажется, что сценарии для него и складных элементов конфликтуют, потому что, хотя складные элементы работают независимо, они не работают. t работает при добавлении в div, управляемый раскрывающимся списком.

Возможно, мои глаза устали, но я не могу определить проблему. Есть идеи, в чем проблема?

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>
<script>
$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});
</script>

И HTML и CSS

<div class="op1 box">
         <button type="button" class="collapsible">Open Collapsible1</button>
        <div class="content">
            <p>Lorem ipsum...</p>
        </div>
        <button type="button" class="collapsible">Open Collapsible2</button>
        <div class="content">
            <p>Lorem ipsum...</p>
        </div>
    </div>

.content {
        padding: 0 18px;
        display: none;
        overflow: hidden;
        background-color: #f1f1f1;
    }