Как в javascript обратиться к родителю текущего элемента и найти в нем элемент?

Question

[Рустам Драницын]

Всем доброго времени суток. Подскажите, пожалуйста как в javascript обратиться к родителю текущего элемента и найти в нем элемент? На jquery это делается двумя строчками, но нужно перевести в js. Перепробовал много вариантов,

<div class="faq_list">
        <div class="faq_item">
          <div class="faq_item_title faq_item_title-seo">
            <div class="faq_item_title_bg"></div>
            <div class="faq_item_title_inner faq_item_title_inner-seo">
              Сколько времени ждать первых результатов продвижения сайта?
            </div>
          </div>
          <div class="faq_item_body">
            <div class="faq_item_title_bg"></div>
            <div class="faq_item_body-item">
              <p>
                test
              </p>
            </div>
          </div>
        </div>
        <div class="faq_item">
          <div class="faq_item_title faq_item_title-seo">
            <div class="faq_item_title_bg"></div>
            <div class="faq_item_title_inner faq_item_title_inner-seo">
              От чего зависит стоимость и сроки продвижения сайта?
            </div>
          </div>
          <div class="faq_item_body">
            <div class="faq_item_title_bg"></div>
            <div class="faq_item_body-item">
              <p>
                test
              </p>
            </div>
          </div>
        </div>
      </div>

.open {
    opacity: 1;
    visibility: visible;

    .popup__content {
        transform: perspective(600px) translate(0px, 0%) rotateX(0deg);
        opacity: 1;
    }
}

.faq_list {
    position: relative;
}

.faq_item {}

.faq_item_title {
    position: relative;
}

.faq_item_title-seo {
    margin-top: 10px;
    border-left: 4px solid rgba(32, 32, 32, 0.5);
}

.faq_item_title_inner {
    display: inline-block;
    position: relative;
    padding: 15px;
    cursor: pointer;
    border-bottom: 2px solid rgba(245,242,242,0.2);
    width: 100%;
}

.faq_item_title_inner-seo {
    font-size: 25px;
    line-height: 29px;
    color: #202020;
}

.faq_item_title_inner:hover:before {
    transform: translateY(1px);
}

.faq_item_title_bg {
    background: rgba(255, 255, 255, 0.3);
    opacity: 0.5;
    padding: 20px 0 20px 10px;
    position: absolute;
    width: 100%;
    height: 100%;
}

.faq_item_title_inner.open:before {
    transform: rotate(180deg);
}

.faq_item_body {
    position: relative;
    font-size: 16px;
    box-sizing: border-box;
    display: none;
    border-left: 4px solid #C5C5C5;
    .faq_item_body-item {
        padding: 10px;
        position: relative;
        p {
            color: #000;
        }
    }
}

$(function () {
   $('.faq_item_title_inner').on('click', function () {
      $(this).parents('.faq_item').find('.faq_item_body').slideToggle(300);
      $(this).toggleClass('open');
   })
});

https://jsfiddle.net/rustamdranitsyn/Lhvarp7u/4/

Answer 1

[DanKud]

document.querySelectorAll('.faq_item_title_inner').forEach(el => {
    el.addEventListener('click', function() {
        let slide = this.closest('.faq_item').querySelector('.faq_item_body');
        slide.style.display = (slide.offsetWidth > 0 || slide.offsetHeight > 0) ? 'none' : 'block';
        this.classList.toggle('open');
    })
});

На счет анимации и остальных функций читайте тут:
https://github.com/nefe/You-Dont-Need-jQuery