“Аккордеон” в “Аккордеоне” на js. Не jquery

var oMC_menu = document.getElementById('MC_menu'), 
  mcMenuItems = oMC_menu.querySelectorAll('#MC_menu > ul > li > p'); 
var mcMenuClassItems = oMC_menu.querySelectorAll('#MC_menu > ul > li > div > ul > li > p'); 
 
for (let i = 0; i < mcMenuItems.length; i++) { 
  mcMenuItems[i].onclick = function() { 
    thisNode = this.parentNode.childNodes[2]; 
    if (thisNode.style.height === '0px' || thisNode.style.height === '') { 
      SlideDown(thisNode, Number((getComputedStyle(thisNode).height).split('px')[0]), thisNode.scrollHeight); 
      if (typeof mcMenuLastItem !== 'undefined' && mcMenuLastItem !== thisNode) 
        SlideUp(mcMenuLastItem, Number((getComputedStyle(mcMenuLastItem).height).split('px')[0])); 
      mcMenuLastItem = thisNode; 
    } else { 
      let heightBlock = Number((getComputedStyle(thisNode).height).split('px')[0]); 
      console.log({ 
        bNode: thisNode, 
        bHeight: heightBlock 
      }, thisNode.scrollHeight); 
      SlideUp(thisNode, heightBlock); 
    } 
  }; 
} 
for (let i = 0; i < mcMenuClassItems.length; i++) { 
  mcMenuClassItems[i].onclick = function() { 
    thisNode = this.parentNode.childNodes[2]; 
    if (thisNode.style.height === '0px' || thisNode.style.height === '') { 
      SlideDown(thisNode, Number((getComputedStyle(thisNode).height).split('px')[0]), thisNode.scrollHeight); 
      if (typeof mcMenuClassLastItem !== 'undefined' && mcMenuClassLastItem !== thisNode) 
        SlideUp(mcMenuClassLastItem, Number((getComputedStyle(mcMenuClassLastItem).height).split('px')[0])); 
      mcMenuClassLastItem = thisNode; 
    } else { 
      let heightBlock = Number((getComputedStyle(thisNode).height).split('px')[0]); 
      console.log({ 
        bNode: thisNode, 
        bHeight: heightBlock 
      }, thisNode.scrollHeight); 
      SlideUp(thisNode, heightBlock); 
    } 
  }; 
} 
 
function SlideUp(block, heightBlock) { 
  if (heightBlock > 0) { 
    let step = 30, 
      newHeight; 
    step = SetStep(heightBlock, step); 
    newHeight = (heightBlock - step < 0) ? 0 : heightBlock - step; 
    block.style.height = newHeight + 'px'; 
    setTimeout(SlideUp, 10, block, newHeight); 
  } 
} 
 
function SlideDown(block, heightBlock, newHeight) { 
  if (heightBlock < newHeight) { 
    let step = 30; 
    step = SetStep(newHeight - heightBlock, step); 
    heightBlock = (heightBlock + step >= newHeight) ? newHeight : heightBlock + step; 
    block.style.height = heightBlock + 'px'; 
    setTimeout(SlideDown, 10, block, heightBlock, newHeight); 
  } 
} 
let mapStep = new Map([ 
  [0, 1], 
  [10, 2], 
  [20, 3], 
  [30, 4], 
  [40, 5], 
  [50, 6], 
  [60, 7], 
  [70, 8], 
  [80, 9], 
  [90, 10], 
  [100, 11] 
]); 
 
function SetStep(interval, mStep) { 
  let i; 
  return mapStep.has(i = ((interval / 10) >> 0) * 10) ? mapStep.get(i) : mStep; 
}

#MC_menu { 
  padding: 10px; 
  background: rgba(98, 49, 35, 0.5); 
  border: solid #b56b2b 3px; 
  min-width: calc(335px + 30px); 
} 
 
#MC_menu li { 
  list-style: none; 
} 
 
#MC_menu>ul>li>p { 
  text-align: center; 
  font-size: 20px; 
  color: white; 
  height: 60px; 
  line-height: 60px; 
  margin: 0; 
  cursor: pointer; 
} 
 
#MC_menu ul { 
  display: block; 
  margin: 0; 
  padding: 0; 
} 
 
#MC_menu>ul>li>p:hover { 
  background: rgba(181, 107, 43, 0.6); 
} 
 
#MC_menu>ul>li>div { 
  padding: 0 10px 0 10px; 
  overflow: hidden; 
  height: 0; 
} 
 
#MC_menu>ul>li>div>ul>li { 
  border: solid red 1px; 
  text-indent: 0; 
} 
 
#MC_menu>ul>li>div>ul>li>div { 
  border: solid blue 1px; 
  text-indent: 0; 
  overflow: hidden; 
  height: 0; 
} 
 
#MC_menu>ul>li>div>ul>li>p { 
  height: 40px; 
  line-height: 40px; 
  margin: 0; 
  cursor: pointer; 
} 
 
#MC_menu>ul>li>div>ul>li>p:hover { 
  background-color: rgba(156, 30, 26, 0.6); 
}

<div id="MC_menu"> 
    <ul> 
        <li><p>Item 1</p> 
            <div>text.<br><br>Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. 
            </div> 
        </li> 
        <li><p>item 2</p> 
            <div>text.<br><br>Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. Много много много текста для теста. 
            </div> 
        </li> 
        <li><p>Item 3</p> 
            <div> 
                <ul> 
                    <li><p>Item 3_1</p> 
                        <div> 
                            Text<br>Text<br>Text<br>Text<br>Text<br>Text 
                        </div> 
                    </li> 
                    <li><p>Item 3_2</p> 
                        <div> 
                            Text<br>Text<br>Text<br>Text<br>Text<br>Text 
                        </div> 
                    </li> 
                </ul> 
            </div> 
        </li> 
    </ul> 
</div>