😘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>
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?