Всем привет. Кто поможет - отдельная благодарность заранее, целый день провозился, просмотрел ролики, статьи, так нигде ничего не понял.
К сути данной темы, при нажатии на первый блок - всё работает как надо, так и должно быть, но при нажатии на второй блок - всё равно действие происходит с первым блоком. Добавлял и event.target и что только не делал - ничего не получалось.
Подскажите, что не так? Если есть возможность, исправить ошибки.
let all = document.getElementById('block');
let btn = document.querySelector('.arrow');
let moreText = document.querySelector('.more');
let changeMain = document.querySelector('.text');
let changeSpan = document.querySelector('.text-span');
all.addEventListener('click', function(event) {
btn.classList.toggle('arrow-for');
changeMain.classList.toggle('for-main', );
changeSpan.classList.toggle('for-main');
if (moreText.style.display === 'none') {
moreText.style.display = 'block';
btn.innerHTML = '<i class="fa fa-times" style="color: black"></i>';
} else {
moreText.style.display = 'none';
btn.innerHTML = 'Know more <i class="fa fa-arrow-right"></i>';
}
});
.img h6,
.img span {
padding-left: 50px;
position: absolute;
color: #f7f7f7;
padding-top: 230px;
width: 90%;
}
.img span {
padding-top: 260px;
font-size: 15px;
}
.img .arrow {
padding-top: 360px;
cursor: pointer;
}
.arrow-for {
background-color: #b2f2ee;
transition: ease 0.2s;
width: 100% !important;
height: 100% !important;
z-index: 1;
}
#more {
position: relative;
z-index: 3;
color: black;
}
.for-main {
z-index: 3 !important;
position: relative;
color: black !important;
margin-top: -250px;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-webkit-transform: translate(0, 50px);
-moz-transform: translate(0, 50px);
-o-transform: translate(0, 50px);
}
<div class="content" id="block">
<div class="img">
<h6 class="text-uppercase font-weight-bold text-left text">Designing is the cool love for.</h6>
<span class="text-span">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum libero odio soluta. Autem debitis, exercitationem maxime praesentium quaerat repudiandae sit... <p class="more" style="display: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid architecto at aut beatae, consectetur dicta dolore ducimus ea eligendi enim eum expedita explicabo incidunt iure labore magnam neque provident saepe sit soluta suscipit tempora totam vel vitae voluptas voluptatem voluptatum. Earum eveniet facilis praesentium repudiandae? Ab assumenda doloremque dolorum</p></span>
<span class="text-uppercase arrow">Know more <i class="fa fa-arrow-right"></i></span>
<img src="http://i.yapx.ru/IM7a6.png" alt="image">
</div>
<div class="img">
<h6 class="text-uppercase font-weight-bold text-left text">Designing is the cool love for.</h6>
<span class="text-span">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum libero odio soluta. Autem debitis, exercitationem maxime praesentium quaerat repudiandae sit... <p class="more" style="display: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid architecto at aut beatae, consectetur dicta dolore ducimus ea eligendi enim eum expedita explicabo incidunt iure labore magnam neque provident saepe sit soluta suscipit tempora totam vel vitae voluptas voluptatem voluptatum. Earum eveniet facilis praesentium repudiandae? Ab assumenda doloremque dolorum</p></span>
<span class="text-uppercase arrow">Know more <i class="fa fa-arrow-right"></i></span>
<img src="http://i.yapx.ru/IM7a4.png" alt="image">
</div>
</div>