Всем привет.
Кто поможет - отдельная благодарность заранее.
1) Имеется код HTML;
<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="img/services/image6.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="img/services/image1.png" alt="image">
</div>
</div>
2) Код CSS
.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);
}
Нужно сделать делегирование, вот то что сделал я:
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>';
}
});
Но проблема с тем, что если я нажимаю на вторую таблицу - всё равно срабатывает первая таблица, знаю что нужен event.target, но как это всё реализовать? Нужно чтобы при нажатии на вторую таблицу - срабатывала вторая, при нажатии на первую - первая и т.д..
