HTML:JS: Accordion FAQ

Accordion FAQ

<div class="faq__items">
									<div class="faq__item">
										<input type="checkbox" id="chck1" name="chck">
										<label class="faq__item-label" for="chck1">
											Who do I contact if something needs to be fixed or replaced in my unit?
										</label>
										<div class="faq__item-content">
											Please check with the concierge if your apartment is still available and we’ll be glad to arrange your extended stay. If not, you might need to move to a new unit. For bookings via Airbnb: you’ll have to request a new reservation before your original check-out time. For security reasons, your smart lock code might change due to the extended stay. If this is the case, we’ll send you the new code via email.
										</div>
									</div>
									<div class="faq__item">
										<input type="checkbox" id="chck2" name="chck">
										<label class="faq__item-label" for="chck2">
											What time is check-in/check-out and how can I request a change?
										</label>
										<div class="faq__item-content">
											Please check with the concierge if your apartment is still available and we’ll be glad to arrange your extended stay. If not, you might need to move to a new unit. For bookings via Airbnb: you’ll have to request a new reservation before your original check-out time. For security reasons, your smart lock code might change due to the extended stay. If this is the case, we’ll send you the new code via email.
										</div>
									</div>
									<div class="faq__item">
										<input type="checkbox" id="chck3" name="chck">
										<label class="faq__item-label" for="chck3">
											What time is check-in/check-out and how can I request a change?
										</label>
										<div class="faq__item-content">
											Please check with the concierge if your apartment is still available and we’ll be glad to arrange your extended stay. If not, you might need to move to a new unit. For bookings via Airbnb: you’ll have to request a new reservation before your original check-out time. For security reasons, your smart lock code might change due to the extended stay. If this is the case, we’ll send you the new code via email.
										</div>
									</div>
								</div>

								<style>
									/*SCSS*/
									/* Accordion styles */
									.faq__items {
										overflow: hidden;
									input {
										position: absolute;
										opacity: 0;
										z-index: -1;
									}
									input:checked {
									+ .tab-label {
										background: #fff;
									&::after {
										 transform: rotate(180deg);
									 }
									}
									~ .tab-content {
										max-height: 100vh;
										padding-bottom: 16px;
									}
									}
									}
									.faq__item {
										width: 100%;
										color: white;
										overflow: hidden;
										border: 1px solid #d5d5d5;
										margin-bottom: 8px;

									.faq__item-label {
										display: flex;
										justify-content: space-between;
										padding: 16px;
										background: #fff;
										cursor: pointer;
										font-family: $playfair;
										font-size: 14px;
										line-height: 19px;
										letter-spacing: 1.5px;
										color: #282828;
										margin: 0;
									/* Icon */
									&:hover {

									 }
									&::after {
										 content: '';
										 width: 13px;
										 height: 7px;
										 background: url('img/icons/select-arrow-down.svg') center center no-repeat;
										 background-size: 100%;
										 transition: all .3s;
										 margin-top: 6px;
									 }
									}
									.faq__item-content {
										max-height: 0;
										padding: 0 16px;
										color: #282828;
										background: white;
										transition: all .35s;
										font-size: 14px;
										line-height: 18px;
										letter-spacing: 1px;
										color: #282828;
										font-family: $ptsans;
									}
									}
								</style>