121 lines
3.8 KiB
Plaintext
121 lines
3.8 KiB
Plaintext
<div class="faq width-limit">
|
|
<h2 class="faq-title">
|
|
FAQ
|
|
</h2>
|
|
<div class="faq-list">
|
|
<div class="faq-element" onclick="this.classList.toggle('open')">
|
|
<div class="faq-question">
|
|
<div class="faq-question-icon">
|
|
<i class="far fa-angle-down faq-icon-closed"></i>
|
|
<i class="far fa-angle-up faq-icon-opened"></i>
|
|
</div>
|
|
<div class="faq-question-text">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
|
|
</div>
|
|
</div>
|
|
<div class="faq-answer body-s">
|
|
At lectus urna duis convallis. Lacus sed viverra tellus in hac habitasse platea dictumst. Enim ut tellus elementum sagittis vitae et leo duis ut. Sed enim ut sem viverra aliquet eget. Urna cursus eget nunc scelerisque.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-element" onclick="this.classList.toggle('open')">
|
|
<div class="faq-question">
|
|
<div class="faq-question-icon">
|
|
<i class="far fa-angle-down faq-icon-closed"></i>
|
|
<i class="far fa-angle-up faq-icon-opened"></i>
|
|
</div>
|
|
<div class="faq-question-text">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
|
</div>
|
|
</div>
|
|
<div class="faq-answer body-s">
|
|
Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Odio euismod lacinia at quis. Eget mauris pharetra et ultrices. Justo nec ultrices dui sapien eget mi proin sed libero. Erat velit scelerisque in dictum non consectetur a. Varius vel pharetra vel turpis nunc. Id aliquet risus feugiat in ante metus dictum at. Tincidunt augue interdum velit euismod in pellentesque massa. Habitant morbi tristique senectus et. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Iaculis urna id volutpat lacus. Nisl nisi scelerisque eu ultrices vitae. A lacus vestibulum sed arcu. Diam sit amet nisl suscipit. Varius quam quisque id diam vel.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-element" onclick="this.classList.toggle('open')">
|
|
<div class="faq-question">
|
|
<div class="faq-question-icon">
|
|
<i class="far fa-angle-down faq-icon-closed"></i>
|
|
<i class="far fa-angle-up faq-icon-opened"></i>
|
|
</div>
|
|
<div class="faq-question-text">
|
|
Libero id faucibus nisl tincidunt eget. Porttitor eget
|
|
</div>
|
|
</div>
|
|
<div class="faq-answer body-s">
|
|
In ante metus dictum at tempor commodo ullamcorper. Aliquet nec ullamcorper sit amet risus nullam eget. Faucibus vitae aliquet nec ullamcorper
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.faq {
|
|
padding-top: 60px;
|
|
padding-bottom: 60px;
|
|
}
|
|
.faq-title {
|
|
padding-bottom: 40px;
|
|
border-bottom: 1px solid #E4E6E9;
|
|
}
|
|
.faq-element {
|
|
border-bottom: 1px solid #E4E6E9;
|
|
padding: 20px 0;
|
|
cursor: pointer;
|
|
}
|
|
.faq-question {
|
|
display: flex;
|
|
}
|
|
.faq-question-icon {
|
|
cursor: pointer;
|
|
background: #F4F5F6;
|
|
border-radius: 50%;
|
|
margin-right: 20px;
|
|
position: relative;
|
|
display: flex;
|
|
height: fit-content;
|
|
align-self: center;
|
|
}
|
|
.faq-question-icon > i {
|
|
height: 36px;
|
|
width: 36px;
|
|
}
|
|
.faq-question-icon > i::before {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.faq-icon-opened {
|
|
display: none;
|
|
}
|
|
.faq-answer {
|
|
display: none;
|
|
margin-left: 56px;
|
|
margin-top: 10px;
|
|
}
|
|
.faq-element.open .faq-icon-opened {
|
|
display: block;
|
|
}
|
|
.faq-element.open .faq-icon-closed {
|
|
display: none;
|
|
}
|
|
.faq-element.open .faq-answer {
|
|
display: block;
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.faq {
|
|
padding-top: 80px;
|
|
padding-bottom: 80px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function toggleFAQ(element) {
|
|
element.classList.toggle('open')
|
|
}
|
|
</script>
|