Với lối tư duy cơ bản, hẳn bạn sẽ bind click vào item và lục lọi tìm các item children và item siblings đúng không? Hãy suy nghĩ lại chút nào. Giờ ta sẽ định nghĩa các hành động thông qua mỗi function. Chẳng hạn như ta sẽ có 3 function dưới đây:

var activeClass = 'active';
// Đây là các items nằm trong .list
var items = Array.prototype.slice.call( document.querySelectorAll('.js-item') );
// Đây là các toggle (thường là header của item)
var toggles = Array.prototype.slice.call( document.querySelectorAll( '.js-toggle') );
function activeItem( item ) {}
function deactiveItem( item ) {}
function deactiveItems() {}

Function activeItem và deactiveItem sẽ cần đầu vào là item mà chúng ta click, trong khi function deactiveItems sẽ lấy từ global variables $items mà ta đã định nghĩa ở trên.

Rõ ràng, nhìn mô hình trên, bạn sẽ hiểu được logic đầu tiên (mà khi chưa click):

1. Bất cứ item nào được truyền qua function activeItem hay deactiveItem sẽ chỉ làm nhiệm vụ active/deactive item đó thôi.
2. Bất cứ khi nào gọi deactiveItems thì tất cả item sẽ đều bị deactive.

Kết hợp tiếp cùng yếu tố bind click vào item, ta sẽ có thêm logic khi click như sau:

toggles.forEach( function( toggle ) {
  toggle.addEventListener('click', function() {
    // Tìm item parent
    var item = this.parentNode;
    if( item.classList.contains( activeClass ) ) {
      deactiveItem( item );
    } else {
      deactiveItems();
      activeItem( item );
    } 
  });
} );

Bạn thấy vấn đề đã được định nghĩa logic rõ ràng hơn chưa? Code gọn gàng, có phân tách ra các bước xử lý độc lập hơn hẳn rồi đấy.

Bạn có thể tham khảo code mẫu tại đây.