Нужно сверстать блок (см. картинку 1) который при клике разворачивался и показывал другой блок с другим текстом (см. картинку 2). Как это можно сверстать?
2 ответа
Могу предположить, что Вам с JavaScript разобраться будет пока что слишком сложно. Поэтому вот решение на чистом CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 10px;
}
.accordion {
transform: translateZ(0);
background: white;
border-bottom: 1px solid lightgray;
border-left: 1px solid lightgray;
border-right: 1px solid lightgray;
}
.accordion>.accordion-toggle {
display: none;
position: absolute;
opacity: 0;
}
.accordion>label {
display: block;
position: relative;
height: 50px;
line-height: 50px;
padding: 0 20px;
border-top: 1px solid lightgray;
border-bottom: 1px solid lightgray;
background: #ecebec;
color: #555;
font-size: 15px;
font-weight: bold;
cursor: pointer;
}
.accordion>label:after {
content: '';
position: absolute;
top: 12px;
right: 20px;
width: 12px;
height: 12px;
border-left: 2px solid #555;
border-top: 2px solid #555;
transform: rotate(-135deg);
transition: 0.4s transform;
}
.accordion>section {
overflow: hidden;
height: 0;
transition: all .4s;
}
.accordion>.accordion-toggle:checked~label:after {
transform: rotate(45deg);
top: 16px;
}
.accordion>.accordion-toggle:checked~section {
height: 50px;
}
.accordion>section p {
margin: 15px 0;
padding: 0 20px;
}
<div class="accordion">
<input id="toggle1" type="radio" class="accordion-toggle" name="toggle" />
<label for="toggle1">Вкладка 1</label>
<section>
<p>Текст 1</p>
</section>
</div>
<div class="accordion">
<input id="toggle2" type="radio" class="accordion-toggle" name="toggle" />
<label for="toggle2">Вкладка 2</label>
<section>
<p>Текст 2</p>
</section>
</div>
<div class="accordion">
<input id="toggle3" type="radio" class="accordion-toggle" name="toggle" />
<label for="toggle3">Вкладка 3</label>
<section>
<p>Текст 3</p>
</section>
</div>
<div class="accordion">
<input id="toggle4" type="radio" class="accordion-toggle" name="toggle" />
<label for="toggle4">Вкладка 4</label>
<section>
<p>Текст 4</p>
</section>
</div>
let div = document.querySelector('div');
let p = document.querySelector('p');
div.addEventListener('click', () => {
p.style.display = 'block';
let span = document.querySelector('span').style.cssText = `
content: '';
position: absolute;
width: 25px;
height: 25px;
border-top: 1px solid black;
right: 30px;
transform: rotate(45deg);
border-left: 1px solid black;
top: 15px;
`;
})
div{
color: red;
font-size: 25px;
font-weight: bold;
cursor: pointer;
text-align: center;
background-color: #ECEBEC;
padding: 5px 0;
position: relative;
}
span{
content: '';
position: absolute;
width: 25px;
height: 25px;
border-top: 1px solid black;
right: 30px;
transform: rotate(223deg);
border-left: 1px solid black;
top: 0;
}
div > p{
display: none;
text-align: center;
}
<div>
text
<span></span>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>