Thuộc tính tabindex="-1" không ngờ lại nguy hiểm vậy đọc bài dưới 😌
https://viblo.asia/p/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-phan-15-bWrZnENnKxw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Accordion</title>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<link rel="stylesheet" href="accordion-style.css">
</head>
<body>
<div class="accordion">
<input type="checkbox" name="accordion" id="item-1">
<label for="item-1" class="accordion-item item-1">
<div class="accordion-head">
<ion-icon name="megaphone" class="accordion-icon"></ion-icon>
<h3 class="accordion-title">Announcements</h3>
<ion-icon name="chevron-down-outline" class="accordion-icon item-1 arrow-icon"></ion-icon>
</div>
<div class="accordion-body">
<p class="accordion-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima amet placeat eum quis
explicabo? Harum inventore quia necessitatibus sed tempora quam deserunt dolorem nam, quis cumque non aperiam
sunt! Magni.</p>
</div>
</label>
<input type="checkbox" name="accordion" id="item-2">
<label for="item-2" class="accordion-item item-2">
<div class="accordion-head">
<ion-icon name="card" class="accordion-icon"></ion-icon>
<h3 class="accordion-title">Payment Details</h3>
<ion-icon name="chevron-down-outline" class="accordion-icon item-2 arrow-icon"></ion-icon>
</div>
<div class="accordion-body">
<p class="accordion-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima amet placeat eum quis
explicabo? Harum inventore quia necessitatibus sed tempora quam deserunt dolorem nam, quis cumque non aperiam
sunt! Magni.</p>
</div>
</label>
<input type="checkbox" name="accordion" id="item-3">
<label for="item-3" class="accordion-item item-3">
<div class="accordion-head">
<ion-icon name="shield-checkmark" class="accordion-icon"></ion-icon>
<h3 class="accordion-title">Security</h3>
<ion-icon name="chevron-down-outline" class="accordion-icon item-3 arrow-icon"></ion-icon>
</div>
<div class="accordion-body">
<p class="accordion-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima amet placeat eum quis
explicabo? Harum inventore quia necessitatibus sed tempora quam deserunt dolorem nam, quis cumque non aperiam
sunt! Magni.</p>
</div>
</label>
<input type="checkbox" name="accordion" id="item-4">
<label for="item-4" class="accordion-item item-4">
<div class="accordion-head">
<ion-icon name="alert-circle" class="accordion-icon"></ion-icon>
<h3 class="accordion-title">About</h3>
<ion-icon name="chevron-down-outline" class="accordion-icon item-4 arrow-icon"></ion-icon>
</div>
<div class="accordion-body">
<p class="accordion-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima amet placeat eum quis
explicabo? Harum inventore quia necessitatibus sed tempora quam deserunt dolorem nam, quis cumque non aperiam
sunt! Magni.</p>
</div>
</label>
</div>
<p id="logo">
<span>~Github:</span> @lordsid003
</p>
</body>
</html>@import url("https://fonts.googleapis.com/css2?family=Quicksand&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all 0.25s ease;
}
body {
min-height: 100vh;
min-width: 700px;
display: flex;
justify-content: center;
align-items: center;
padding: 50px;
font-family: "Quicksand", sans-serif;
background: hsl(0, 0%, 95%);
}
.accordion {
width: 400px;
}
.accordion input {
display: none;
}
.accordion-item {
--hue: 205;
--title-color: hsl(var(--hue), 90%, 20%);
--icon-color: hsl(var(--hue), 90%, 40%);
--bg: hsla(var(--hue), 100%, 90%, 0.8);
position: relative;
display: block;
cursor: pointer;
margin-bottom: 10px;
}
.accordion-head {
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
border: 1px solid transparent;
border-radius: 10px;
box-shadow: 0 5px 10px hsla(0, 0, 0%, 0.06);
}
.accordion-head:hover {
border-color: var(--icon-color);
}
.accordion-icon {
font-size: 30px;
margin-right: 15px;
color: var(--icon-color);
}
.accordion-title {
font-size: 20px;
font-weight: 700;
color: var(--title-color);
}
.accordion-body {
height: 0;
overflow: hidden;
}
.accordion-text {
background: var(--bg);
border: 1px solid var(--bg);
border-radius: 10px;
margin-top: 5px;
padding: 15px 20px;
color: #0009;
font-weight: 600;
}
.item-2 {
--hue: 260;
}
.item-3 {
--hue: 330;
}
.item-4 {
--hue: 100;
}
#logo {
position: absolute;
bottom: 0;
right: 0;
margin-right: 2rem;
margin-bottom: 2rem;
color: #000;
font-weight: 700;
}
#logo span {
color: hsl(39, 100%, 50%);
}
.arrow-icon {
position: absolute;
right: 0;
font-size: 20px;
font-weight: bolder;
margin-right: 30px;
border: 3px solid var(--icon-color);
border-radius: 50%;
text-align: center;
}
:is(#item-1, #item-2, #item-3, #item-4):checked + .accordion-item .accordion-body {
height: 150px;
}
:is(#item-1, #item-2, #item-3, #item-4):checked + .accordion-item .accordion-head .arrow-icon {
transform: rotate(180deg);
}
PreviousMột vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 14)NextMột vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 15)
Last updated
Was this helpful?
