Как задать поведение для каждого элемента?

[hetsketch]

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

<div class="work-type">
  <div class="work-item">
    <span>Photography</span>
    <i class="fa fa-angle-down" aria-hidden="true"></i>
  </div>
  <p class="desc">Lorem</p>
  
  <div class="work-item">
    <span>Photography</span>
    <i class="fa fa-angle-down" aria-hidden="true"></i>
  </div>
  <p class="desc">Lorem</p>
</div>

$(document).ready(function() {
  var workItem = $('.work-item');
  var workDesc = $('.desc');
  var arrow = $('.work-item i');

  $(workItem).on('click', function(e) {
    workDesc.slideToggle();
    if ($(arrow).hasClass('fa-angle-down')) {
      $(arrow).removeClass('fa-angle-down');
      $(arrow).addClass('fa-angle-up');
      workItem.css('margin-bottom', '0');
    } else{
      $(arrow).removeClass('fa-angle-up');
      $(arrow).addClass('fa-angle-down');
      workItem.css('margin-bottom', '10px');
    }
  });  
});

 

Edited November 23, 2016 by hetsketch

[Q4Dizzy]

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

https://jqueryui.com/accordion/

А по поводу стрелки сбоку и её замены, используйте псевдоэлелменты after или before. Если стрелку надо поменять, развернуть и т.д. - то скрипт добавляет класс ui-state-active у открытого элемента, с помощью него и меняйте.

Edited November 23, 2016 by Q4Dizzy

[hetsketch]

@Q4Dizzy, спасибо! Не знал, как эта штука называется, поэтому не смог найти в гугле. Буду ее юзать

[andrey7287]

Из за 4 строчек кода подключать целую либу ?!

function toggleMenu(e){
	e.preventDefault();
	$('.site-nav__item').removeClass('site-nav__item--act');
	$(this).parent().addClass('site-nav__item--act');
	$(this).parent().siblings().find('ul').stop().hide('slow');
	$(this).next().stop().toggle('slow');
};

ЗЫ Это я для многоуровневого меню делал ul->li->a  

[Q4Dizzy]

Ну тут дело каждого, писать свой код или подключать либу. Просто по пошаговому описанию того, что хотел hetsketch, он не знал о аккордеоне. Да и не то время уже, что бы очень уж сильно экономить на килобайтах (Хотя я так же предпочитаю оптимизировать всё, что возможно, не в ущерб функционалу) + никто не мешает кастомизировать либу и извлечь из неё только требуемое.