Спойлер

Я в js не шарю почти, но думаю, что у каждого твоего спойлер должен быть ID который будет передаваться в js и так он будет понимать какой должен быть открыт спойлер и закрыт.
Покажи код html хотя бы 2-х блоков которые ты хочет открывать и закрывать.

 

Код (CSS):

1.  .mainMenu{width: 460px;}
2. .none{display: none;}
3.  
4. ul{
5.    list-style: none;
6.    padding: 0;
7.    font-size: 18px;
8. }
9. .item{
10.    margin-bottom: 5px;
11. }
12. .item_title{
13.    position: relative;
14.    z-index:2;
15. }
16.  
17.  
18. .item_title span{
19.   display: inline-block;
20.   position: absolute;
21.     top:19px;
22.     right:20px;
23.     width: 14px;
24.     height: 12px;
25.     background: url('arrov2.png') no-repeat;
26. }
27.   .submenu:before{
28.     content: '';
29.     display: block;
30.     padding-top: 35px;
31.   }
32. .submenu{
33.    background: #e7e7e7;
34.    position: relative;
35.    top:-40px;
36.    left:0;
37.    z-index:1;
38.    color: #4f4f4f;
39. }
40.  
41. .item:nth-child(odd) > .item_title{
42.    background: #696666;
43.   color: white;
44. }
45.   .item:nth-child(even) > .item_title{
46.      background: #e7e7e7;
47.  
48. }
49. .active{background: #ff8663 !important;}
50.  
51. .item_title, .submenu{
52.   padding: 13px 20px;
53.   border-radius:30px;
54. }
55.  
56. .item_title:hover{
57.   cursor: pointer;
58. }

HTML:

1. <ul class="mainMenu">
2.  
3.     <li class="item ">
4.       <div class="item_title">Основы языка и как на нём говорить правильно
5.         <span></span>
6.       </div>
7.       <ul class="submenu none">
8.           <li>Лексическая структура</li>
9.           <li>Типы данных, значения и переменные</li>
10.           <li>Выражения и операторы инструкции</li>
11.        
12.       </ul>
13.     </li>
14.     <li class="item">
15.       <div class="item_title" >Функции  <span></span></div>
16.       <ul class="submenu none">
17.           <li>Лексическая структура</li>
18.           <li>Типы данных, значения и переменные</li>
19.           <li>Выражения и операторы инструкции</li>
20.        
21.       </ul>
22.     </li>
23.     <li class="item">
24.       <div class="item_title" >Обработка ошибок и отладка  <span></span></div>
25.       <ul class="submenu none">
26.           <li>Лексическая структура</li>
27.           <li>Типы данных, значения и переменные</li>
28.           <li>Выражения и операторы инструкции</li>
29.        
30.       </ul>
31.     </li>
32.     <li class="item">
33.       <div class="item_title">Объекты и массивы  <span></span></div>
34.       <ul class="submenu none">
35.           <li>Лексическая структура</li>
36.           <li>Типы данных, значения и переменные</li>
37.           <li>Выражения и операторы инструкции</li>
38.        
39.       </ul>
40.     </li>
41.     <li class="item">
42.       <div class="item_title">События  <span></span></div>
43.       <ul class="submenu none">
44.           <li>Лексическая структура</li>
45.           <li>Типы данных, значения и переменные</li>
46.           <li>Выражения и операторы инструкции</li>
47.        
48.       </ul>
49.     </li>
50.   </ul>

Код (Javascript):

1.     let mainMenu = document.querySelector('.mainMenu')
2.     let allItems = document.querySelectorAll('.item'); // получаем все пункты аккордеона
3.  
4. mainMenu.addEventListener("click", e => {
5.   let currentItem = e.target.closest('.item'); // поднимаемся до пункта аккордеона, по которому кликнули
6.  
7.   for (let item of allItems) { // перебираем все пункты аккордеона
8.     item.firstElementChild.classList.remove('active'); // удаляем класс active
9.     item.firstElementChild.nextElementSibling.classList.add('none');
10.     item.firstElementChild.firstElementChild.style.backgroundImage = "url('arrov2.png')"
11.   }
12.   currentItem.firstElementChild.classList.add('active'); // добавляем класс active элементу по которому кликнули
13.   currentItem.firstElementChild.nextElementSibling.classList.remove('none')
14.   currentItem.firstElementChild.nextElementSibling.style.marginBottom = "-40px";
15.   currentItem.firstElementChild.firstElementChild.style.backgroundImage = "url('arrov.png')"
16. });

--- Добавлено ---
http://jsfiddle.net/d0pracwq/