|
40 | 40 | .accordion { |
41 | 41 | width: 700px; |
42 | 42 | margin: 100px auto; |
| 43 | + display: flex; |
| 44 | + flex-direction: column; |
| 45 | + gap: 24px; |
43 | 46 | } |
44 | 47 |
|
45 | | - .item {} |
| 48 | + .item { |
| 49 | + box-shadow: 0 0 32px rgb(0, 0, 0, 0.1); |
| 50 | + padding: 24px; |
| 51 | + |
| 52 | + display: grid; |
| 53 | + grid-template-columns: auto 1fr auto; |
| 54 | + column-gap: 24px; |
| 55 | + row-gap: 32px; |
| 56 | + align-items: center; |
| 57 | + } |
46 | 58 |
|
47 | 59 | .number, |
48 | 60 | .text { |
49 | 61 | font-size: 24px; |
50 | 62 | font-weight: 500; |
51 | | - color: #087f5b; |
| 63 | + /* color: #087f5b; */ |
| 64 | + } |
| 65 | + |
| 66 | + .number { |
| 67 | + color: #ced4da; |
52 | 68 | } |
53 | 69 |
|
54 | 70 | .icon { |
|
59 | 75 |
|
60 | 76 | .text {} |
61 | 77 |
|
62 | | - .hidden-box {} |
| 78 | + .hidden-box { |
| 79 | + grid-column: 2; |
| 80 | + display: none; |
| 81 | + } |
63 | 82 |
|
64 | 83 | .hidden-box p { |
65 | 84 | line-height: 1.6; |
|
74 | 93 | flex-direction: column; |
75 | 94 | gap: 12px; |
76 | 95 | } |
| 96 | + |
| 97 | + .open { |
| 98 | + border-top: 4px solid #087f5b; |
| 99 | + } |
| 100 | + |
| 101 | + .open .hidden-box { |
| 102 | + display: block; |
| 103 | + } |
| 104 | + |
| 105 | + .open .number, |
| 106 | + .open .text { |
| 107 | + color: #087f5b; |
| 108 | + } |
77 | 109 | </style> |
78 | 110 | </head> |
79 | 111 |
|
80 | 112 | <body> |
81 | 113 | <div class="accordion"> |
82 | 114 | <div class="item"> |
| 115 | + <p class="number">01</p> |
| 116 | + <p class="text">Where are these chairs assembled?</p> |
| 117 | + <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" |
| 118 | + stroke="currentColor" class="w-6 h-6"> |
| 119 | + <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> |
| 120 | + </svg> |
| 121 | + |
| 122 | + <div class="hidden-box"> |
| 123 | + <p> |
| 124 | + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias |
| 125 | + magni sed cumque, corporis earum facilis rem aspernatur dignissimos |
| 126 | + et reiciendis deleniti nesciunt omnis voluptates at commodi eveniet |
| 127 | + maiores aut id. |
| 128 | + </p> |
| 129 | + <ul> |
| 130 | + <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li> |
| 131 | + <li> |
| 132 | + Fugiat libero aperiam minus necessitatibus assumenda pariatur. |
| 133 | + </li> |
| 134 | + <li> |
| 135 | + Soluta distinctio cumque provident eos autem, temporibus ipsum. |
| 136 | + </li> |
| 137 | + <li>Rerum eveniet molestias laborum officia tenetur beatae.</li> |
| 138 | + </ul> |
| 139 | + </div> |
| 140 | + </div> |
| 141 | + <div class="item open"> |
83 | 142 | <p class="number">02</p> |
84 | 143 | <p class="text">How long do I hace to return my chair</p> |
85 | 144 | <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" |
86 | 145 | stroke="currentColor" class="w-6 h-6"> |
87 | 146 | <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> |
88 | 147 | </svg> |
89 | 148 |
|
| 149 | + <div class="hidden-box"> |
| 150 | + <p> |
| 151 | + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias |
| 152 | + magni sed cumque, corporis earum facilis rem aspernatur dignissimos |
| 153 | + et reiciendis deleniti nesciunt omnis voluptates at commodi eveniet |
| 154 | + maiores aut id. |
| 155 | + </p> |
| 156 | + <ul> |
| 157 | + <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li> |
| 158 | + <li> |
| 159 | + Fugiat libero aperiam minus necessitatibus assumenda pariatur. |
| 160 | + </li> |
| 161 | + <li> |
| 162 | + Soluta distinctio cumque provident eos autem, temporibus ipsum. |
| 163 | + </li> |
| 164 | + <li>Rerum eveniet molestias laborum officia tenetur beatae.</li> |
| 165 | + </ul> |
| 166 | + </div> |
| 167 | + </div> |
| 168 | + <div class="item"> |
| 169 | + <p class="number">03</p> |
| 170 | + <p class="text">Do you ship to countries outside the EU?</p> |
| 171 | + <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" |
| 172 | + stroke="currentColor" class="w-6 h-6"> |
| 173 | + <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> |
| 174 | + </svg> |
| 175 | + |
90 | 176 | <div class="hidden-box"> |
91 | 177 | <p> |
92 | 178 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias |
|
0 commit comments