jQuery 活动元件上的手风琴手风琴

Question

I have 4 items. The first item is active by default. When the user selects another item, the accordion should appear beneath that one, the active one. All other accordions should close.

<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>

Here is the 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';
    }
  });
}

The problem here is that the first active item doesn't show it's panel, when you open a page.

Next bigger problem is the toggle, right now it opens the panel when you click on an item and closes when you click on it again. But it doesn't close back when I click on another item. The panel should only appear on the active selected item.

JSFIDDLE , but it doesn't work well: https://jsfiddle.net/gk489ocm/

Where I got the idea from: https://www.w3schools.com/howto/howto_js_accordion.asp Just need the toggle to display on the selected, clicked element.

Answer 1

Here it is a working and more compact jQuery function:

$('.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/