jQuery переключить аккордеон на активный элемент

Question

У меня 4 шт. По умолчанию активен первый элемент. Когда пользователь выбирает другой элемент, аккордеон должен появляться под этим, активным. Все остальные аккордеоны должны закрываться.

<div class="nav-link acti-show-cone active" id="show-cl1"
     style="display: block; cursor: pointer;">
  <div class="rectangle-cust1"></div>
  <div class="move-text-lf accordion" style="display: inline-block;">
    FIRST ITEM
  </div>
  <div class="panel">
    <p>Lorem ipsum...</p>
  </div>
</div>

<div class="nav-link acti-show-ctwo" id="show-cl2"
     style="display: block; cursor: pointer;">
  <div class="rectangle-cust2"></div>
  <div class="move-text-lf accordion" style="display: inline-block;">
    SECOND ITEM
  </div>

  <div class="panel">
    <p>Lorem ipsum.232323232..</p>
  </div>
</div>

Вот jQuery:

var acc = document.getElementsByClassName('accordion');
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener('click', function () {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    console.log('ivan', this);
    //this.classList.toggle("active");
    $('.active').not($(this)).removeClass('active');
    $(this).addClass('active');

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + 'px';
    }
  });
}

Проблема в том, что первый активный элемент не отображает свою панель при открытии страницу.

Следующая большая проблема - это переключатель, прямо сейчас он открывает панель, когда вы нажимаете на элемент, и закрывается, когда вы нажимаете на него снова. Но он не закрывается, когда я нажимаю на другой элемент. Панель должна отображаться только на активном выбранном элементе.

JSFIDDLE , но это не работает: https://jsfiddle.net/gk489ocm/

Где я получил идею от: https://www.w3schools.com/howto/howto_js_accordion.asp Просто нужно, чтобы переключатель отображался на выбранном, нажатом элементе.

Answer 1

Вот рабочая и более компактная jQuery функция:

$('.nav-link').on( "click", function() {
  $('.nav-link').removeClass("active");
  $(this).addClass("active");
  $('.panel').hide();
  $(this).find('.panel').show(); 
});

Fiddle: https://jsfiddle.net/Maro94/tmw7agvz/1/