Menampilkan dan Menyembunyikan Elemen Secara Responsif
Gunakan hidden, block, dan inline-* dengan prefiks responsif untuk menampilkan atau menyembunyikan elemen pada ukuran layar tertentu.
Menampilkan dan Menyembunyikan Elemen Secara Responsif adalah pelajaran Tailwind CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Tailwind CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Mengapa Menampilkan dan Menyembunyikan Secara Responsif?
Ukuran viewport yang berbeda memerlukan pola UI yang berbeda. Navigasi desktop menampilkan semua tautan dalam bilah horizontal, sedangkan perangkat seluler hanya menampilkan ikon hamburger yang membuka panel. Tabel data dengan 8 kolom di desktop mungkin hanya menampilkan 3 kolom utama di perangkat seluler. Daripada membuat dua UI terpisah, Tailwind memungkinkan Anda menampilkan atau menyembunyikan elemen pada breakpoint tertentu menggunakan utilitas tampilan yang digabungkan dengan awalan responsif.
<!-- Hamburger visible on mobile, full nav on desktop -->
<nav class="flex items-center justify-between p-4">
<span class="font-bold">MyApp</span>
<!-- Full nav: hidden on mobile, visible on md+ -->
<div class="hidden md:flex gap-6">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<!-- Hamburger: visible on mobile, hidden on md+ -->
<button class="md:hidden">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</nav>Pola hidden dan block
Dua utilitas utama untuk visibilitas responsif adalah hidden (display: none) dan block (display: block). Untuk menampilkan sesuatu hanya di perangkat seluler: block md:hidden — elemen menjadi blok secara bawaan dan berubah menjadi none pada md ke atas. Untuk menampilkan sesuatu hanya di desktop: hidden md:block — elemen menjadi none secara bawaan dan berubah menjadi blok pada md ke atas. Kedua pola ini mencakup sebagian besar kebutuhan untuk menampilkan atau menyembunyikan elemen.
<!-- Two core show/hide patterns -->
<!-- Mobile-only element -->
<div class="block md:hidden bg-blue-100 p-3 rounded">
This appears only on mobile (below md breakpoint)
</div>
<!-- Desktop-only element -->
<div class="hidden md:block bg-green-100 p-3 rounded">
This appears only on md screens and wider
</div>Menargetkan Rentang Breakpoint Tertentu
Untuk menampilkan elemen hanya dalam rentang tertentu — misalnya, hanya pada tablet (sm hingga lg, bukan seluler dan bukan desktop) — gabungkan penyembunyian di seluler, penampilan pada sm, dan penyembunyian pada lg: hidden sm:block lg:hidden. Artinya: tersembunyi secara bawaan, terlihat pada sm, lalu tersembunyi lagi pada lg. Kombinasi tiga kelas ini membatasi elemen pada rentang viewport tablet.
<!-- Show element only on specific viewport ranges -->
<div class="space-y-2">
<!-- Only on mobile (< sm) -->
<div class="bg-red-100 p-2 rounded block sm:hidden">Mobile only (<640px)</div>
<!-- Only on tablets (sm to md) -->
<div class="bg-yellow-100 p-2 rounded hidden sm:block md:hidden">Small tablet only</div>
<!-- Only on desktop (lg+) -->
<div class="bg-green-100 p-2 rounded hidden lg:block">Desktop only (1024px+)</div>
<!-- On all screens -->
<div class="bg-blue-100 p-2 rounded">Always visible</div>
</div>Menggunakan flex dan grid, Bukan block
Saat elemen harus terlihat sebagai kontainer flex (bukan sekadar blok) pada breakpoint tertentu, gunakan hidden md:flex, bukan hidden md:block. Ini penting untuk bilah navigasi, baris bilah alat, dan baris kartu yang memerlukan perilaku flex. hidden md:flex items-center gap-4 menyembunyikan elemen di perangkat seluler dan menampilkannya sebagai kontainer flex dengan perataan di desktop.
<!-- Navigation: hidden on mobile, flex row on desktop -->
<header class="flex items-center justify-between px-6 py-4 border-b">
<span class="font-bold text-lg">Brand</span>
<!-- Desktop nav: flex row with spacing -->
<nav class="hidden md:flex items-center gap-6">
<a href="#" class="text-gray-600 hover:text-gray-900 text-sm">Products</a>
<a href="#" class="text-gray-600 hover:text-gray-900 text-sm">Pricing</a>
<a href="#" class="text-gray-600 hover:text-gray-900 text-sm">Blog</a>
<button class="bg-blue-600 text-white text-sm px-4 py-2 rounded-lg">Sign In</button>
</nav>
<!-- Mobile hamburger -->
<button class="md:hidden p-2">
<span class="block w-5 h-0.5 bg-gray-700 mb-1"></span>
<span class="block w-5 h-0.5 bg-gray-700 mb-1"></span>
<span class="block w-5 h-0.5 bg-gray-700"></span>
</button>
</header>Kolom Tabel Responsif
Tabel data di perangkat seluler menghadirkan tantangan — terlalu banyak kolom membuat tabel harus digulir secara horizontal dan sulit dibaca. Solusi yang umum adalah menyembunyikan kolom yang kurang penting pada layar kecil. Terapkan hidden md:table-cell pada kolom tabel yang tidak esensial — kolom tersebut menjadi display: table-cell pada tablet dan desktop, tetapi sepenuhnya tersembunyi di perangkat seluler sehingga tabel tetap mudah digunakan pada layar kecil.
<!-- Responsive table: hide secondary columns on mobile -->
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="bg-gray-50 text-left">
<th class="p-3 font-semibold">Name</th>
<!-- Hidden on mobile -->
<th class="hidden md:table-cell p-3 font-semibold">Email</th>
<th class="p-3 font-semibold">Status</th>
<!-- Hidden on mobile -->
<th class="hidden lg:table-cell p-3 font-semibold">Joined</th>
<th class="p-3 font-semibold">Actions</th>
</tr>
</thead>
<tbody class="divide-y">
<tr class="hover:bg-gray-50">
<td class="p-3">Alice Johnson</td>
<td class="hidden md:table-cell p-3 text-gray-500">alice@example.com</td>
<td class="p-3"><span class="bg-green-100 text-green-700 px-2 py-0.5 rounded text-xs">Active</span></td>
<td class="hidden lg:table-cell p-3 text-gray-500">Jan 2024</td>
<td class="p-3"><button class="text-blue-600 text-sm">Edit</button></td>
</tr>
</tbody>
</table>
</div>Varian inline-flex dan inline-block
Untuk elemen sebaris, gunakan hidden md:inline-flex atau hidden md:inline-block agar perilaku sebaris tetap terjaga bersama teks di sebelahnya saat elemen tersebut terlihat. Lencana di dalam judul, ikon di dalam tautan, atau label harga yang sebaris dengan nama produk semuanya memerlukan tampilan inline atau inline-flex. Menggunakan block biasa akan memutus aliran teks.
<!-- Inline badge reveals on desktop -->
<h2 class="flex items-center gap-2 text-xl font-bold">
Pro Features
<!-- Badge: hidden on mobile, inline-flex on desktop -->
<span class="hidden md:inline-flex items-center gap-1 bg-purple-100 text-purple-700 text-xs font-semibold px-2 py-0.5 rounded-full">
✨ New
</span>
</h2>
<!-- Inline text suffix hides on mobile -->
<button class="flex items-center gap-1 text-sm text-blue-600">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
<span class="hidden sm:inline">Download</span>
</button>Visibilitas vs Tampilan untuk Elemen Tersembunyi
Tailwind juga menyediakan utilitas invisible dan visible yang menggunakan CSS visibility: hidden, bukan display: none. Perbedaan utamanya: hidden (display:none) menghapus elemen dari aliran tata letak sehingga ruangnya menyusut. invisible menyembunyikan elemen secara visual, tetapi mempertahankan ruangnya dalam tata letak. Gunakan invisible saat Anda perlu mempertahankan posisi elemen tanpa menampilkannya.
<!-- display:none collapses space; visibility:hidden preserves it -->
<div class="space-y-4">
<p>Above</p>
<!-- hidden: collapses, no space reserved -->
<div class="hidden bg-red-100 p-4 rounded">Hidden (no space)</div>
<!-- invisible: space preserved, element not seen -->
<div class="invisible bg-blue-100 p-4 rounded">Invisible (space held)</div>
<p>Below</p>
</div>Pengalih Bilah Samping Responsif
Pola yang sangat umum adalah bilah samping yang selalu terlihat di desktop, tetapi tersembunyi secara bawaan di perangkat seluler (hanya ditampilkan saat hamburger diklik). Di desktop, bilah samping selalu terlihat melalui hidden md:block. Di perangkat seluler, JavaScript mengubah kelas untuk menampilkan atau menyembunyikannya — tetapi Tailwind menangani visibilitas awalnya. Pola ini mengharuskan bilah samping selalu ada di DOM demi SEO dan aksesibilitas pembaca layar.
<!-- Sidebar: always on desktop, togglable on mobile -->
<div class="flex min-h-screen">
<!-- Sidebar: hidden on mobile, always visible on md+ -->
<aside class="hidden md:block w-64 shrink-0 bg-gray-900 text-white p-6">
<nav class="space-y-2">
<a href="#" class="block px-3 py-2 rounded hover:bg-gray-800">Dashboard</a>
<a href="#" class="block px-3 py-2 rounded hover:bg-gray-800">Users</a>
<a href="#" class="block px-3 py-2 rounded hover:bg-gray-800">Settings</a>
</nav>
</aside>
<!-- Main content -->
<main class="flex-1 p-6">
<!-- Mobile menu button -->
<button class="md:hidden mb-4 bg-gray-900 text-white px-3 py-2 rounded">
Menu
</button>
<h1 class="text-2xl font-bold">Content</h1>
</main>
</div>Label Teks Bersyarat
Tombol yang hanya menampilkan ikon di perangkat seluler, tetapi menampilkan label teks di desktop, adalah konvensi hemat ruang yang digunakan banyak aplikasi. Ikon selalu terlihat, sedangkan label teks menggunakan hidden sm:inline agar hanya muncul pada layar yang lebih lebar. Cara ini menjaga UI seluler tetap ringkas sekaligus membuat versi desktop lebih deskriptif. Pengguna pembaca layar selalu dapat melihat label yang mudah diakses melalui aria-label pada tombol.
<!-- Toolbar: icon-only on mobile, icon+label on desktop -->
<div class="flex items-center gap-2 p-3 border-b">
<button aria-label="Save" class="flex items-center gap-1.5 px-3 py-2 rounded-lg hover:bg-gray-100">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
</svg>
<span class="hidden sm:inline text-sm">Save</span>
</button>
<button aria-label="Share" class="flex items-center gap-1.5 px-3 py-2 rounded-lg hover:bg-gray-100">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m6.632 8.684A9 9 0 1110.7 3.294" />
</svg>
<span class="hidden sm:inline text-sm">Share</span>
</button>
</div>Hanya Menampilkan pada Perangkat Tertentu
Untuk kontrol yang sangat presisi, Anda dapat menargetkan satu rentang breakpoint dengan dua kelas. Untuk menampilkan elemen hanya pada md (768px hingga 1023px): hidden md:block lg:hidden. Untuk menampilkan elemen hanya pada lg dan xl, tetapi tidak pada 2xl: hidden lg:block 2xl:hidden. Kombinasi beberapa kelas ini memberi Anda kontrol terperinci atas elemen yang muncul pada setiap lebar viewport, sehingga strategi penyajian konten dapat sepenuhnya berbeda untuk setiap kelas perangkat.
<!-- Elements visible on exactly one breakpoint range -->
<div class="p-4 space-y-2">
<!-- Shows only on sm (640-767px) -->
<div class="hidden sm:block md:hidden bg-pink-100 p-2 rounded text-sm">
Small screen only (640-767px)
</div>
<!-- Shows only on md (768-1023px) -->
<div class="hidden md:block lg:hidden bg-orange-100 p-2 rounded text-sm">
Medium screen only (768-1023px)
</div>
<!-- Shows only on lg (1024-1279px) -->
<div class="hidden lg:block xl:hidden bg-lime-100 p-2 rounded text-sm">
Large screen only (1024-1279px)
</div>
</div>Catatan Aksesibilitas untuk Elemen Tersembunyi
Elemen yang disembunyikan dengan hidden (display:none) juga disembunyikan dari pembaca layar dan dikeluarkan dari pohon aksesibilitas — biasanya ini adalah perilaku yang tepat. Namun, jika Anda perlu menyembunyikan sesuatu secara visual sambil tetap membuatnya dapat diakses oleh pembaca layar, gunakan sr-only. Sebaliknya, jika Anda ingin menyembunyikan konten dari pembaca layar tetapi tetap menampilkannya secara visual, gunakan aria-hidden='true' pada elemen tersebut. Pilih teknik penyembunyian yang tepat berdasarkan tujuan aksesibilitas Anda.
<!-- Three hiding techniques with different a11y behavior -->
<!-- 1. Visual + screen reader hidden (most common) -->
<div class="hidden md:block">Full description for desktop</div>
<!-- 2. Visually hidden but screen-reader visible -->
<span class="sr-only">Close dialog</span>
<!-- 3. Visually visible but screen-reader hidden -->
<div aria-hidden="true" class="text-3xl">🎉</div>Pemeriksaan Singkat
Uji pemahaman Anda tentang konsep Penguasaan Tailwind CSS dari pelajaran ini.
Ringkasan Pelajaran
Dalam pelajaran ini, Anda telah mempelajari: hidden md:block menampilkan elemen hanya pada layar md dan yang lebih lebar, block md:hidden menampilkan elemen hanya pada perangkat seluler di bawah breakpoint md, dan hidden sm:block md:hidden menargetkan satu rentang breakpoint seperti sm hingga md saja. Dengan ini, kursus Breakpoint Desain Responsif selesai — selanjutnya kita akan membahas mode gelap dengan Tailwind.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menampilkan dan Menyembunyikan Elemen Secara Responsif” gratis?
Ya — teks lengkap “Menampilkan dan Menyembunyikan Elemen Secara Responsif” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Tailwind CSS Academy, upgrade ke CoddyKit PRO. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menampilkan dan Menyembunyikan Elemen Secara Responsif”?
Gunakan hidden, block, dan inline-* dengan prefiks responsif untuk menampilkan atau menyembunyikan elemen pada ukuran layar tertentu. Kamu berlatih Tailwind CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Tailwind CSS Academy?
Tidak diperlukan pengalaman sebelumnya. Tailwind CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Menampilkan dan Menyembunyikan Elemen Secara Responsif” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Sistem Titik Henti Tailwind
- Tata Letak Responsif dengan Flex dan Grid
- Tipografi dan Spasi Responsif
- Menampilkan dan Menyembunyikan Elemen Secara Responsif