muayjtp/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added accordion

Browse source
This commit is contained in:
JSriwongsa 2023-07-21 19:41:33 -05:00
parent b1aba9a1b2
commit 1eb724f532
3 changed files with 162 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
donation_website/index.html
View file

@ -320,7 +320,82 @@
</div>
</div>
<div class="accordion">
<div class="container">
<div class="content-2">
<h2>How we can make a difference</h2>
<div class="question-answ">
<div class="question">
<h3 class="title-question">Give blood</h3>
<button class="question-btn">
<span class="icon-up">
<i class='bx bx-chevron-up'></i>
</span>
<span class="icon-down">
<i class='bx bx-chevron-down'></i>
</span>
</button>
</div>
<div class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
<div class="question-answ">
<div class="question">
<h3 class="title-question">Host a Blood Drive</h3>
<button class="question-btn">
<span class="icon-up">
<i class='bx bx-chevron-up'></i>
</span>
<span class="icon-down">
<i class='bx bx-chevron-down'></i>
</span>
</button>
</div>
<div class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
<div class="question-answ">
<div class="question">
<h3 class="title-question">Volunteer</h3>
<button class="question-btn">
<span class="icon-up">
<i class='bx bx-chevron-up'></i>
</span>
<span class="icon-down">
<i class='bx bx-chevron-down'></i>
</span>
</button>
</div>
<div class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
<div class="question-answ">
<div class="question">
<h3 class="title-question">Join Our Team</h3>
<button class="question-btn">
<span class="icon-up">
<i class='bx bx-chevron-up'></i>
</span>
<span class="icon-down">
<i class='bx bx-chevron-down'></i>
</span>
</button>
</div>
<div class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
</div>
<div class="content-2-img">
<img src="images/accordion.png" alt="">
</div>
</div>
</div>
</main>

17
donation_website/main.js
View file

@ -76,7 +76,16 @@ const swiper = new Swiper('.swiper', {
prevEl: '.button-prev',
},
});
//accordion
const questions = document.querySelectorAll('.question-answ');
questions.forEach(function(question){
const btn = question.querySelector('.question-btn');
btn.addEventListener("click", function(){
questions.forEach(function(item){
if(item !== question){
item.classList.remove('show-text');
}
})
question.classList.toggle('show-text');
})
})

74
donation_website/style.css
View file

@ -600,6 +600,69 @@ form.search i{
.nextprev i:hover{
color: gray;
}
/*----- accordion -----*/
.accordion .container{
max-width: 65%;
display: flex;
flex-wrap: wrap;
gap: 50px;
margin-top: 50px;
}
.content-2-img{
flex: 1 1 21rem;
}
.content-2-img img{
border-radius: 5px;
height: 90%;
}
.content-2{
flex: 1 1 21rem;
}
.content-2 h2{
font-size: 22px;
text-shadow: 2px 2px gray;
text-transform: uppercase;
margin-bottom: 30px;
}
.content-2 .question-answ{
width: 100%;
border-bottom: 1px solid gray;
}
.content-2 .question{
display: flex;
justify-content: space-between;
}
.content-2 .title-question{
margin: 20px 0;
font-size: 20px;
font-weight: 600;
color: #E34234;
}
.content-2 .question-btn{
font-size: 20px;
background-color: transparent;
border-color: transparent;
cursor: pointer;
}
.content-2 .icon-up{
display: none;
}
.content-2 .answer{
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
color: #625a71;
display: none;
}
.content-2 .show-text .answer{
display: block;
}
.content-2 .show-text .icon-up{
display: inline;
}
.content-2 .show-text .icon-down{
display: none;
}
@ -670,6 +733,17 @@ form.search i{
max-width: 33.33%;
padding: 0 1rem;
}
/*----- accordion -----*/
.question-answ{
width: 380px;
}
.content{
margin-top: 100px;
}
.title{
margin-top: 50px;
font-size: 36px;
}
}