I would animate these divs, so that when I click on the right arrow comes out the answer, and when click closes. How can I do that? I would like to practically open the box to show the answer when you click and then close it and show only the question at the click. Screenshot here: https://ibb.co/dc2MZTn
HTML
<body>
<div >
<div >
<p >01</p>
<p >Where are these chairs assembled?</p>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
<div >
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Accusantium dolor at sequi obcaecati cupiditate. Voluptates
repellendus cupiditate aperiam! Incidunt amet quo neque.
</p>
<ul>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
<li>
Quasi accusamus corporis totam tempora suscipit ab obcaecati.
</li>
<li>Tempora, et atque officia at consequatur laborum!</li>
<li>Repudiandae praesentium illo voluptate in, atque enim.</li>
</ul>
</div>
</div>
<div >
<p >02</p>
<p >How long do I have to return my chair?</p>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
<div >
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Accusantium dolor at sequi obcaecati cupiditate. Voluptates
repellendus cupiditate aperiam! Incidunt amet quo neque.
</p>
<ul>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
<li>
Quasi accusamus corporis totam tempora suscipit ab obcaecati.
</li>
<li>Tempora, et atque officia at consequatur laborum!</li>
<li>Repudiandae praesentium illo voluptate in, atque enim.</li>
</ul>
</div>
</div>
<div >
<p >03</p>
<p >Do you ship to countries outside the EU?</p>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
<div >
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Accusantium dolor at sequi obcaecati cupiditate. Voluptates
repellendus cupiditate aperiam! Incidunt amet quo neque.
</p>
<ul>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
<li>
Quasi accusamus corporis totam tempora suscipit ab obcaecati.
</li>
<li>Tempora, et atque officia at consequatur laborum!</li>
<li>Repudiandae praesentium illo voluptate in, atque enim.</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
color: #343a40;
line-height: 1;
}
.accordion {
width: 700px;
margin: 100px auto;
display: flex;
flex-direction: column;
gap: 24px;
}
.item {
box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
padding: 24px;
display: grid;
grid-template-columns: auto 1fr auto;
column-gap: 24px;
row-gap: 32px;
align-items: center;
}
.number,
.text {
font-size: 24px;
font-weight: 500;
/* color: #087f5b; */
}
.number {
color: #ced4da;
}
.icon {
width: 24px;
height: 24px;
stroke: #087f5b;
}
.hidden-box {
grid-column: 2;
display: none;
}
.hidden-box p {
line-height: 1.6;
margin-bottom: 24px;
}
.hidden-box ul {
color: #868e96;
margin-left: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* OPEN STATE */
.open {
border-top: 4px solid #087f5b;
}
.open .hidden-box {
display: block;
}
.open .number,
.open .text {
color: #087f5b;
}
CodePudding user response:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div >
<div >
<p >01</p>
<p >Where are these chairs assembled?</p>
added label
<label for="down-arrow1">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</label>
added input type checkbox
<input type="checkbox" id="down-arrow1">
<div >
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Accusantium dolor at sequi obcaecati cupiditate. Voluptates
repellendus cupiditate aperiam! Incidunt amet quo neque.
</p>
<ul>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
<li>
Quasi accusamus corporis totam tempora suscipit ab obcaecati.
</li>
<li>Tempora, et atque officia at consequatur laborum!</li>
<li>Repudiandae praesentium illo voluptate in, atque enim.</li>
</ul>
</div>
</div>
<div >
<p >02</p>
<p >How long do I have to return my chair?</p>
<label for="down-arrow2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</label>
<input type="checkbox" id="down-arrow2">
<div >
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Accusantium dolor at sequi obcaecati cupiditate. Voluptates
repellendus cupiditate aperiam! Incidunt amet quo neque.
</p>
<ul>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
<li>
Quasi accusamus corporis totam tempora suscipit ab obcaecati.
</li>
<li>Tempora, et atque officia at consequatur laborum!</li>
<li>Repudiandae praesentium illo voluptate in, atque enim.</li>
</ul>
</div>
</div>
<div >
<p >03</p>
<p >Do you ship to countries outside the EU?</p>
<label for="down-arrow3">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</label>
<input type="checkbox" id="down-arrow3">
<div >
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Accusantium dolor at sequi obcaecati cupiditate. Voluptates
repellendus cupiditate aperiam! Incidunt amet quo neque.
</p>
<ul>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
<li>
Quasi accusamus corporis totam tempora suscipit ab obcaecati.
</li>
<li>Tempora, et atque officia at consequatur laborum!</li>
<li>Repudiandae praesentium illo voluptate in, atque enim.</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
color: #343a40;
line-height: 1;
}
.accordion {
width: 700px;
margin: 100px auto;
display: flex;
flex-direction: column;
gap: 24px;
}
.item {
box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
padding: 24px;
display: grid;
grid-template-columns: auto 1fr auto;
column-gap: 24px;
row-gap: 32px;
align-items: center;
}
.number,
.text {
font-size: 24px;
font-weight: 500;
/* color: #087f5b; */
}
.number {
color: #ced4da;
}
.icon {
width: 24px;
height: 24px;
stroke: #087f5b;
}
.hidden-box {
grid-column: 2;
display: none;
}
.hidden-box p {
line-height: 1.6;
margin-bottom: 24px;
}
.hidden-box ul {
color: #868e96;
margin-left: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
hide checkbox
input {
display: none;
}
/* OPEN STATE */
click on down arrow => show text
#down-arrow1:checked ~ .hidden-box, #down-arrow2:checked ~ .hidden-box, #down-arrow3:checked ~ .hidden-box {
display: block;
}
Explain: put the image inside the label, create a checkbox that is clickable by the label then hide the checkbox (I'm new to HTML/CSS too so this is probably not the most optimize way)
CodePudding user response:
There is a lot of ways to do so, but the one that I can think of right now is the following snippet, if you don't want other items to close you can simply remove the forEach method inside the function
//this only closes others
document.querySelectorAll('.open').forEach(elm =>{
if(elm !== e.target.parentNode){
elm.classList.remove('open');
}
});
//attaching event listers to all svg.icon
document.querySelectorAll('svg.icon').forEach(elm =>{
elm.addEventListener('click', openMe);
});
//the main function
function openMe(e){
//toggle the open class of the parent (item itself)
var targ = e.target.parentNode;
if(targ.tagName == 'svg'){targ = targ.parentNode;}
targ.classList.toggle('open');
//====================
//This following block is to close every other item
document.querySelectorAll('.open').forEach(elm =>{
if(elm !== targ){
elm.classList.remove('open');
}
});
//===========================
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
color: #343a40;
line-height: 1;
}
.accordion {
width: 700px;
margin: 100px auto;
display: flex;
flex-direction: column;
gap: 24px;
}
.item {
box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
padding: 24px;
display: grid;
grid-template-columns: auto 1fr auto;
column-gap: 24px;
row-gap: 32px;
align-items: center;
}
.number,
.text {
font-size: 24px;
font-weight: 500;
/* color: #087f5b; */
}
.number {
color: #ced4da;
}
.icon {
width: 24px;
height: 24px;
stroke: #087f5b;
}
.hidden-box {
grid-column: 2;
display: none;
}
.hidden-box p {
line-height: 1.6;
margin-bottom: 24px;
}
.hidden-box ul {
color: #868e96;
margin-left: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* OPEN STATE */
.open {
border-top: 4px solid #087f5b;
}
.open .hidden-box {
display: block;
}
.open .number,
.open .text {
color: #087f5b;
}
<div >
<div >
<p >01</p>
<p >Where are these chairs assembled?</p>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
<div >
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Accusantium dolor at sequi obcaecati cupiditate. Voluptates
repellendus cupiditate aperiam! Incidunt amet quo neque.
</p>
<ul>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
<li>
Quasi accusamus corporis totam tempora suscipit ab obcaecati.
</li>
<li>Tempora, et atque officia at consequatur laborum!</li>
<li>Repudiandae praesentium illo voluptate in, atque enim.</li>
</ul>
</div>
</div>
<div >
<p >02</p>
<p >How long do I have to return my chair?</p>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
<div >
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Accusantium dolor at sequi obcaecati cupiditate. Voluptates
repellendus cupiditate aperiam! Incidunt amet quo neque.
</p>
<ul>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
<li>
Quasi accusamus corporis totam tempora suscipit ab obcaecati.
</li>
<li>Tempora, et atque officia at consequatur laborum!</li>
<li>Repudiandae praesentium illo voluptate in, atque enim.</li>
</ul>
</div>
</div>
<div >
<p >03</p>
<p >Do you ship to countries outside the EU?</p>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
<div >
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Accusantium dolor at sequi obcaecati cupiditate. Voluptates
repellendus cupiditate aperiam! Incidunt amet quo neque.
</p>
<ul>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
<li>
Quasi accusamus corporis totam tempora suscipit ab obcaecati.
</li>
<li>Tempora, et atque officia at consequatur laborum!</li>
<li>Repudiandae praesentium illo voluptate in, atque enim.</li>
</ul>
</div>
</div>
</div>