Bisakah teks disembunyikan dan ditampilkan hanya dengan CSS (tanpa kode JavaScript)? [Tutup]

Question 1

Apakah mungkin untuk menampilkan dan menyembunyikan teks menggunakan tautan dengan hanya CSS - tanpa menggunakan JavaScript sama sekali?

Contoh: Di halaman ini

Perhatikan tautan "Lainnya". Saat Anda mengkliknya, teks akan ditampilkan. Contoh khusus ini adalah JavaScript, tetapi saya tidak yakin apakah itu dapat dilakukan dengan CSS murni.

Question 2

Ada <details>elemen , yang belum ada di Edge:

<details>
  <summary>more <!-- a bad summary --></summary>
  <p>Some content</p>
</details>

Luaskan cuplikan

Saya tidak yakin betapa sulitnya menata gaya secara konsisten di seluruh browser.

Ada peretasan kotak centang umum (di mana kotak centang dapat disembunyikan dan label dapat ditata agar terlihat seperti apa saja):

#more:not(:checked) ~ #content {
  display: none;
}

<input id="more" type="checkbox" /> <label for="more">more</label>

<p id="content">Some content</p>

Luaskan cuplikan

tetapi tidak selalu (mungkin pernah? hmm) cocok untuk digunakan; Anda biasanya dapat kembali menampilkan konten saat JavaScript gagal dimuat, dan memiliki tautan "lainnya" ke sana.

Ada juga :target, tapi mungkin kurang tepat, karena lebih sulit untuk membangun mekanisme penutupan.

#content {
  display: none;
}

#content:target {
  display: block;
}

#less {
  display: none;
}

#content:target ~ #less {
  display: block;
}

<a href="#content" id="more">More</a>
<p id="content">Lorem ipsum</p>
<a href="#" id="less">Less</a>

Luaskan cuplikan

Question 3

Ya , ini dimungkinkan dengan CSS murni. Anda dapat mengklik sebuah elemen dengan menggunakan kotak centang:checked atribut dikombinasikan dengan atribut <label>elemen for.

Karena kotak centang bisa tidak dicentang , Anda dapat menggunakan ini untuk mengubah visibilitas hanya dengan menambahkan visibility: hiddenke elemen yang berasal dari :checked(setelah kotak centang diklik lagi, pseudo-selector ini tidak akan valid, dan pemilih CSS tidak akan lagi cocok dengan target).

Ini dapat diperluas ke a <label>dengan menggunakan foratribut, sehingga Anda dapat sepenuhnya menyembunyikan kotak centang itu sendiri, dan menerapkan gaya Anda sendiri ke <label>secara langsung.

Berikut ini memanfaatkan kombinator saudara yang berdekatan ( +) untuk beralih kelas togglesaat <label>elemen diklik:

input[type="checkbox"] {
  display: none; /* Hide the checkbox */
}

/* This is tied to the invisible checkbox */
label {
    background-color: #4CAF50;
    border: 2px solid black;
    border-radius: 20px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    display: inline-block;
    margin-bottom: 20px;
    cursor: pointer;
    user-select: none;
}

/* The target element to toggle */
input[type="checkbox"]:checked + label + .toggle {
  visibility: hidden;
}

<input type="checkbox" id="checkbox" />
<label for="checkbox">Click me to toggle the content</label>
<div class="toggle">CONTENT</div>

Luaskan cuplikan

Question 4

Ya, Anda dapat dengan mudah melakukan ini hanya dengan menggunakan CSS. Silakan lihat kode di bawah ini:

* {
  box-sizing: border-box;
}

body {
  background-color: #646464;
  color: #fff;
}

header {
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 1.5em;
  text-align: center;
  padding: 1em;
}

.panel-wrapper {
  position: relative;
}

.btn {
  color: #fff;
  background: #000;
  border-radius: 1.5em;
  left: 30%;
  padding: 1em;
  text-decoration: none;
  width: 40%;
}

.show,
.hide {
  position: absolute;
  bottom: -1em;
  z-index: 100;
  text-align: center;
}

.hide {
  display: none;
}

.show:target {
  display: none;
}

.show:target~.hide {
  display: block;
}

.show:target~.panel {
  max-height: 2000px;
}

.show:target~.fade {
  margin-top: 0;
}

.panel {
  position: relative;
  margin: 2em auto;
  width: 70%;
  max-height: 100px;
  overflow: hidden;
  transition: max-height .5s ease;
}

.fade {
  background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #646464 75%);
  height: 100px;
  margin-top: -100px;
  position: relative;
}

<!DOCTYPE html>
<html lang='en' class=''>

<head>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
</head>

<body>
  <header>CSS Only: Show More</header>
  <div class="panel-wrapper">
    <a href="#show" class="show btn" id="show">Show Full Article</a>
    <a href="#hide" class="hide btn" id="hide">Hide Full Article</a>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra consectetur accumsan. Vestibulum vitae ipsum euismod, tempus ligula non, tempus lacus. Phasellus at pellentesque ex. Praesent at ipsum dui. Cras lectus neque, bibendum ac diam
        a, elementum tristique felis. Sed iaculis, diam at vehicula lacinia, odio urna tincidunt felis, sit amet scelerisque urna erat non leo. Pellentesque vel leo vitae tellus bibendum viverra.</p>
      <p>Donec id ultrices mi. Suspendisse potenti. Pellentesque cursus sagittis lacinia. Mauris elit sem, eleifend nec facilisis eget, fermentum sed odio. Nam aliquam massa nec leo tincidunt rhoncus. Integer tincidunt finibus tincidunt. Maecenas aliquam
        fermentum nisi, vitae mattis neque vehicula vitae.</p>
      <p>Nam orci purus, consequat sed lorem id, lacinia efficitur lorem. Vestibulum id quam ut elit congue varius. Donec justo augue, rhoncus non nisl ut, consectetur consequat velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aliquam
        auctor sapien lorem, at vestibulum justo congue vel. Duis volutpat, lorem quis tincidunt ornare, felis tortor posuere tellus, nec pretium neque velit vulputate libero.</p>
      <p>Morbi tortor tortor, auctor porttitor felis in, eleifend cursus ante. Nullam pellentesque lorem ipsum, in fringilla enim suscipit cursus. Pellentesque feugiat volutpat congue. Donec ac ante elit. Quisque ornare lacus dui, id commodo tortor lacinia
        nec. Curabitur dignissim magna sagittis neque aliquam porttitor. Aenean sit amet tincidunt risus.</p>
      <p>Cras feugiat, sapien luctus congue gravida, enim enim tristique nisl, vel porta lacus ante vitae dolor. Duis at nisl sed lectus imperdiet congue. Vestibulum pellentesque finibus ligula, sit amet elementum enim dignissim eget. Nullam bibendum justo
        eros, in placerat est ullamcorper nec. Donec blandit accumsan venenatis. Vivamus nec elit arcu. Morbi ultrices blandit sapien eget aliquam. Pellentesque placerat et libero a sodales. Donec eget erat ac velit maximus ullamcorper. Nulla laoreet
        dolor in purus sollicitudin varius. Duis eu erat ut magna lobortis rhoncus ac at lacus. Nullam in mi sed sem porttitor molestie. Aenean auctor dui in neque vulputate, in mattis purus tristique. Aliquam egestas venenatis ultricies. Nam elementum
        ante libero, nec dictum erat mollis dapibus. Phasellus pharetra euismod nibh, sit amet lobortis odio.</p>
      <p>Sed bibendum dapibus leo eu facilisis. Cras interdum malesuada diam id lobortis. Phasellus tristique odio eget placerat ornare. Phasellus nisl nulla, auctor convallis turpis tempus, molestie blandit urna. Nullam accumsan tellus massa, at tincidunt
        metus imperdiet sed. Donec sed imperdiet quam, id dignissim dolor. Curabitur mollis ultricies tempor. Morbi porttitor, turpis et dignissim aliquam, nunc lacus dignissim massa, a consequat nibh est vel turpis. Pellentesque blandit, ante vehicula
        sollicitudin imperdiet, tellus urna fringilla diam, id tempor neque augue eu nisl. Quisque eu sem posuere, vehicula risus ut, ullamcorper massa. Fusce vulputate bibendum erat, vel dapibus dui consectetur nec. Donec mauris mauris, egestas non malesuada
        non, finibus nec lacus. Duis at mauris tincidunt, accumsan augue non, vestibulum libero.</p>
      <p>Vestibulum fermentum vulputate lectus, at sollicitudin diam laoreet vitae. Aliquam erat volutpat. Nulla condimentum, arcu nec suscipit ultrices, urna tortor rutrum purus, sed mollis lacus ligula vitae justo. Duis vitae malesuada sem, eget finibus
        nibh. Etiam facilisis, urna ac blandit molestie, quam velit congue nibh, ac.</p>

    </div>
    <!-- end panel -->
    <div class="fade"></div>
  </div>
  <!-- end panel-wrapper -->

</body>

</html>

Luaskan cuplikan

Question 5

Anda dapat menyembunyikan kotak centang, tetapi mengizinkannya untuk dicentang / tidak dicentang melalui yang terkait <label> elemen yang .

Berdasarkan apakah kotak centang tersebut dicentang atau tidak, Anda dapat menyembunyikan / menampilkan teks tambahan, dan bahkan mengubah teks label dari "Lainnya" menjadi "Lebih Sedikit".

Saya telah menyertakan beberapa detail tambahan di CSS sehingga maksud setiap definisi bisa sedikit lebih jelas.

1. Dengan satu tombol toggle "More" / "Less":

.more-text, #more-checkbox {          /* Hide the second paragraph and checkbox */
  display: none;
}

input:checked ~ .more-text {          /* Show the second paragraph when checked */
  display: block;
}

.more-label::after {                  /* Label underline, hand cursor, color */
  cursor: pointer;
  text-decoration: underline;
  color: #666;
}

input ~ .more-label::after {          /* Set label text to "More" by default */
  content: 'More';
}

input:checked ~ .more-label::after {  /* Set label text to "Less" when checked */
  content: 'Less';
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.
</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox"></label>

<p class="more-text">
  Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

Luaskan cuplikan

2. Dengan tombol "Lainnya" di bagian atas dan tombol "Kurangi" di bagian bawah:

.more-text, #more-checkbox, .less-label {
  display: none;
}

.more-label, .less-label {          
  cursor: pointer;
  text-decoration: underline; 
  color: #666;
}

input:checked ~ .more-text, input:checked ~ .less-label {
  display: block;
}

input:checked ~ .more-label {
  display: none;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox">More</label>

<p class="more-text">
  Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

<label class="less-label" for="more-checkbox">Less</label>

Luaskan cuplikan

Question 6

Secara teknis, dimungkinkan untuk mengubah visibilitas teks berdasarkan saat Anda mengklik tombol atau link, seperti yang ditunjukkan di bawah ini:

.hidden-text {
  display: none;
}

.toggle-text:focus + .hidden-text {
  display: block;
}

<p>
  This is an example with no hidden content until you... <a href="#" class="toggle-text">read more</a>!
  <span class="hidden-text">Now I'm visible!!!</span>
</p>

Luaskan cuplikan

Karena itu, saya sangat menyarankan agar Anda membiasakan diri dengan JavaScript karena solusi menggunakan JavaScript untuk sesuatu seperti ini jauh lebih sederhana dan memungkinkan fleksibilitas tambahan.

Question 7

Ya, Anda dapat melakukannya hanya dengan menggunakan HTML dan CSS.

body { padding: 20px; }

div { margin-top: 10px; border: 1px solid black; width: 200px; height: 100px;
    padding: 5px;
}
input:checked + label + div { display: none; }
input + label:after { content: " To Hide"; }
input:checked + label:after { content: " To Show"; }

label {
    background-color: yellow;
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
    border-radius: 4px;
    font-size: 16px;
    display: inline-block;
    padding: 2px 5px;
    cursor: pointer;
}

<input type='checkbox' style='display: none' id=cb>
<label for=cb>Click Here</label>
<div>
    Hello. This is some stuff.
</div>

Luaskan cuplikan

Question 8

sekarang Anda dapat menyembunyikan / menampilkan teks hanya dengan menggunakan CSS juga! Jika Anda menggunakan input teks dan ingin menampilkan / menyembunyikan teks berdasarkan status kotak input, Anda dapat menggunakan pseudo-class CSS baru :placeholder-shownuntuk <input>atau <textarea>. Berikut adalah contoh / demo dari pseudo-class yang disebutkan di atas !:

/* Some base style  */
.app {
  margin: 10px auto;
  padding: 10px;
}

code {
  background-color: lightgray;
  padding: 4px;
}

input {
  padding: 5px 10px;
}

input:focus {
  outline: none;
}

/* When there is something in input box give 
  it a solid blue border */

input:not(:placeholder-shown) {
  border: solid 2px #42A5F5
}

/* Hide the p initially */
p {
  background-color: #F0F4C3;
  padding: 5px;
  opacity: 0;
  transition: all 300ms ease-in-out;
}


/* Show the p when the placeholder is not shown. 
  i.e. Something is in the input box and placeholder is gone */
input:not(:placeholder-shown)+p {
  opacity: 1
}

<div class="app">
  <h1>Hide/Show Text using input's <code>:placehoder-shown</code> psuedo class!</h1>
  <label for="name">Enter your name</label>
  <input type="text" id="name" placeholder="Your Name">
  <p class="msg">Well done!</p>
</div>

Luaskan cuplikan

Ini Link ke Dokumen MDN.

Ini adalah teknologi eksperimental Periksa tabel kompatibilitas Browser dengan cermat sebelum menggunakan ini dalam produksi.

Question 9

Mungkin seseorang akan menemukan solusi ini lebih intuitif dan lebih mudah diterapkan. Mekanismenya adalah bahwa tautan menargetkan dirinya sendiri dan dalam hal ini mudah untuk memilih apa pun yang berikutnya di DOM.

.toggle-hide,
.toggle-content {
  display: none;
}
.toggle-show:target + .toggle-hide,
.toggle-show:target + .toggle-hide + .toggle-content {
  display: block;
}
.toggle-show:target {
  display: none;
}

<a id="target" class="toggle-show" href="#target">Show</a>
<a class="toggle-hide" href="#" >Hide</a>
<p class="toggle-content">Lorem ipsum</p>

Luaskan cuplikan

Question 10

Menggunakan "display: none;" attribute.

Answer 1 · 13-09-2018 13: 22: 22Z

86

Apakah mungkin untuk menampilkan dan menyembunyikan teks menggunakan tautan dengan hanya CSS - tanpa menggunakan JavaScript sama sekali?

Contoh: Di halaman ini

Perhatikan tautan "Lainnya". Saat Anda mengkliknya, teks akan ditampilkan. Contoh khusus ini adalah JavaScript, tetapi saya tidak yakin apakah itu dapat dilakukan dengan CSS murni.

css pengguna3188544
sumber

2

Contoh lain dari situs web khusus CSS (dengan menu) adalah grc.com (Steve Gibson dari Security Now ).

Peter Mortensen

1

Kemungkinan duplikat: 1 2

pengguna202729

Kemungkinan duplikat dari Hide Show content-list dengan hanya CSS, tidak ada javascript yang digunakan

jww

Silakan lihat di sana: Toggle Sidebar hanya dengan CSS Ada dua contoh, satu memerlukan klik (menggunakan kotak centang tersembunyi) dan lainnya menggunakan hover )

F. Hauri

@ Tutup pemilih: Jelaskan diri Anda.

Boann

Answer 2

2

Contoh lain dari situs web khusus CSS (dengan menu) adalah grc.com (Steve Gibson dari Security Now ).

Peter Mortensen

Answer 3

1

Kemungkinan duplikat: 1 2

pengguna202729

Answer 4

Kemungkinan duplikat dari Hide Show content-list dengan hanya CSS, tidak ada javascript yang digunakan

jww

Answer 5

Silakan lihat di sana: Toggle Sidebar hanya dengan CSS Ada dua contoh, satu memerlukan klik (menggunakan kotak centang tersembunyi) dan lainnya menggunakan hover )

F. Hauri

Answer 6

@ Tutup pemilih: Jelaskan diri Anda.

Boann

Answer 7

107

Ada <details>elemen , yang belum ada di Edge:

<details>
  <summary>more <!-- a bad summary --></summary>
  <p>Some content</p>
</details>

Luaskan cuplikan

Saya tidak yakin betapa sulitnya menata gaya secara konsisten di seluruh browser.

Ada peretasan kotak centang umum (di mana kotak centang dapat disembunyikan dan label dapat ditata agar terlihat seperti apa saja):

#more:not(:checked) ~ #content {
  display: none;
}

<input id="more" type="checkbox" /> <label for="more">more</label>

<p id="content">Some content</p>

Luaskan cuplikan

tetapi tidak selalu (mungkin pernah? hmm) cocok untuk digunakan; Anda biasanya dapat kembali menampilkan konten saat JavaScript gagal dimuat, dan memiliki tautan "lainnya" ke sana.

Ada juga :target, tapi mungkin kurang tepat, karena lebih sulit untuk membangun mekanisme penutupan.

#content {
  display: none;
}

#content:target {
  display: block;
}

#less {
  display: none;
}

#content:target ~ #less {
  display: block;
}

<a href="#content" id="more">More</a>
<p id="content">Lorem ipsum</p>
<a href="#" id="less">Less</a>

Luaskan cuplikan

Ry-
sumber

8

Ada penggunaan sah yang bagus untuk metode kotak centang. Perhatikan bentuk seperti contoh yang saya tiru ini .

misterManSam

7

Bingung mengapa Anda berpikir :checkedatau :targettidak akan pernah pantas. Mereka memang ada.

Konrad Rudolph

@KonradRudol Satu-satunya hal yang dapat saya pikirkan adalah idpersyaratannya, membuatnya lebih sulit untuk digunakan untuk halaman dinamis. Bukan alasan yang baik meskipun IMO - pola kotak centang tersembunyi ini cukup lama, tidak sulit dipahami, dan Anda dapat menggunakan hash sebagai bagian dari ID dalam situasi dinamis.

Izkata

3

@KonradRudolph: mungkin tidak pantas untuk memperluas konten dengan tautan "lainnya" . Terutama :target- konten akan hilang jika Anda menautkan ke tempat lain. :checkedberarti Anda tidak dapat menautkan di dalam perluasan, dan jika Anda menyembunyikan kotak centang, Anda harus membuat label dapat difokuskan pada keyboard. Karena agar salah satu dari ini berfungsi, konten harus sudah ada di sana, saya hanya akan menunjukkannya secara default dan menggunakan JavaScript untuk memberikan peningkatan dalam banyak kasus.

Ry-

@misterManSam: Itu bukan tautan "selengkapnya", itu formulir sebenarnya.

Ry-

Answer 8

8

Ada penggunaan sah yang bagus untuk metode kotak centang. Perhatikan bentuk seperti contoh yang saya tiru ini .

misterManSam

Answer 9

7

Bingung mengapa Anda berpikir :checkedatau :targettidak akan pernah pantas. Mereka memang ada.

Konrad Rudolph

Answer 10

@KonradRudol Satu-satunya hal yang dapat saya pikirkan adalah idpersyaratannya, membuatnya lebih sulit untuk digunakan untuk halaman dinamis. Bukan alasan yang baik meskipun IMO - pola kotak centang tersembunyi ini cukup lama, tidak sulit dipahami, dan Anda dapat menggunakan hash sebagai bagian dari ID dalam situasi dinamis.

Izkata

Answer 11

3

@KonradRudolph: mungkin tidak pantas untuk memperluas konten dengan tautan "lainnya" . Terutama :target- konten akan hilang jika Anda menautkan ke tempat lain. :checkedberarti Anda tidak dapat menautkan di dalam perluasan, dan jika Anda menyembunyikan kotak centang, Anda harus membuat label dapat difokuskan pada keyboard. Karena agar salah satu dari ini berfungsi, konten harus sudah ada di sana, saya hanya akan menunjukkannya secara default dan menggunakan JavaScript untuk memberikan peningkatan dalam banyak kasus.

Ry-

Answer 12

@misterManSam: Itu bukan tautan "selengkapnya", itu formulir sebenarnya.

Ry-

Answer 13

Ya , ini dimungkinkan dengan CSS murni. Anda dapat mengklik sebuah elemen dengan menggunakan kotak centang:checked atribut dikombinasikan dengan atribut <label>elemen for.

Karena kotak centang bisa tidak dicentang , Anda dapat menggunakan ini untuk mengubah visibilitas hanya dengan menambahkan visibility: hiddenke elemen yang berasal dari :checked(setelah kotak centang diklik lagi, pseudo-selector ini tidak akan valid, dan pemilih CSS tidak akan lagi cocok dengan target).

Ini dapat diperluas ke a <label>dengan menggunakan foratribut, sehingga Anda dapat sepenuhnya menyembunyikan kotak centang itu sendiri, dan menerapkan gaya Anda sendiri ke <label>secara langsung.

Berikut ini memanfaatkan kombinator saudara yang berdekatan ( +) untuk beralih kelas togglesaat <label>elemen diklik:

input[type="checkbox"] {
  display: none; /* Hide the checkbox */
}

/* This is tied to the invisible checkbox */
label {
    background-color: #4CAF50;
    border: 2px solid black;
    border-radius: 20px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    display: inline-block;
    margin-bottom: 20px;
    cursor: pointer;
    user-select: none;
}

/* The target element to toggle */
input[type="checkbox"]:checked + label + .toggle {
  visibility: hidden;
}

<input type="checkbox" id="checkbox" />
<label for="checkbox">Click me to toggle the content</label>
<div class="toggle">CONTENT</div>

Luaskan cuplikan

Answer 14

3

Inilah yang memungkinkan CSS melewati aturan 110 dan dianggap Turing lengkap eli.fox-epste.in/rule110

ESR

Answer 15

Ya, Anda dapat dengan mudah melakukan ini hanya dengan menggunakan CSS. Silakan lihat kode di bawah ini:

* {
  box-sizing: border-box;
}

body {
  background-color: #646464;
  color: #fff;
}

header {
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 1.5em;
  text-align: center;
  padding: 1em;
}

.panel-wrapper {
  position: relative;
}

.btn {
  color: #fff;
  background: #000;
  border-radius: 1.5em;
  left: 30%;
  padding: 1em;
  text-decoration: none;
  width: 40%;
}

.show,
.hide {
  position: absolute;
  bottom: -1em;
  z-index: 100;
  text-align: center;
}

.hide {
  display: none;
}

.show:target {
  display: none;
}

.show:target~.hide {
  display: block;
}

.show:target~.panel {
  max-height: 2000px;
}

.show:target~.fade {
  margin-top: 0;
}

.panel {
  position: relative;
  margin: 2em auto;
  width: 70%;
  max-height: 100px;
  overflow: hidden;
  transition: max-height .5s ease;
}

.fade {
  background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #646464 75%);
  height: 100px;
  margin-top: -100px;
  position: relative;
}

<!DOCTYPE html>
<html lang='en' class=''>

<head>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
</head>

<body>
  <header>CSS Only: Show More</header>
  <div class="panel-wrapper">
    <a href="#show" class="show btn" id="show">Show Full Article</a>
    <a href="#hide" class="hide btn" id="hide">Hide Full Article</a>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra consectetur accumsan. Vestibulum vitae ipsum euismod, tempus ligula non, tempus lacus. Phasellus at pellentesque ex. Praesent at ipsum dui. Cras lectus neque, bibendum ac diam
        a, elementum tristique felis. Sed iaculis, diam at vehicula lacinia, odio urna tincidunt felis, sit amet scelerisque urna erat non leo. Pellentesque vel leo vitae tellus bibendum viverra.</p>
      <p>Donec id ultrices mi. Suspendisse potenti. Pellentesque cursus sagittis lacinia. Mauris elit sem, eleifend nec facilisis eget, fermentum sed odio. Nam aliquam massa nec leo tincidunt rhoncus. Integer tincidunt finibus tincidunt. Maecenas aliquam
        fermentum nisi, vitae mattis neque vehicula vitae.</p>
      <p>Nam orci purus, consequat sed lorem id, lacinia efficitur lorem. Vestibulum id quam ut elit congue varius. Donec justo augue, rhoncus non nisl ut, consectetur consequat velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aliquam
        auctor sapien lorem, at vestibulum justo congue vel. Duis volutpat, lorem quis tincidunt ornare, felis tortor posuere tellus, nec pretium neque velit vulputate libero.</p>
      <p>Morbi tortor tortor, auctor porttitor felis in, eleifend cursus ante. Nullam pellentesque lorem ipsum, in fringilla enim suscipit cursus. Pellentesque feugiat volutpat congue. Donec ac ante elit. Quisque ornare lacus dui, id commodo tortor lacinia
        nec. Curabitur dignissim magna sagittis neque aliquam porttitor. Aenean sit amet tincidunt risus.</p>
      <p>Cras feugiat, sapien luctus congue gravida, enim enim tristique nisl, vel porta lacus ante vitae dolor. Duis at nisl sed lectus imperdiet congue. Vestibulum pellentesque finibus ligula, sit amet elementum enim dignissim eget. Nullam bibendum justo
        eros, in placerat est ullamcorper nec. Donec blandit accumsan venenatis. Vivamus nec elit arcu. Morbi ultrices blandit sapien eget aliquam. Pellentesque placerat et libero a sodales. Donec eget erat ac velit maximus ullamcorper. Nulla laoreet
        dolor in purus sollicitudin varius. Duis eu erat ut magna lobortis rhoncus ac at lacus. Nullam in mi sed sem porttitor molestie. Aenean auctor dui in neque vulputate, in mattis purus tristique. Aliquam egestas venenatis ultricies. Nam elementum
        ante libero, nec dictum erat mollis dapibus. Phasellus pharetra euismod nibh, sit amet lobortis odio.</p>
      <p>Sed bibendum dapibus leo eu facilisis. Cras interdum malesuada diam id lobortis. Phasellus tristique odio eget placerat ornare. Phasellus nisl nulla, auctor convallis turpis tempus, molestie blandit urna. Nullam accumsan tellus massa, at tincidunt
        metus imperdiet sed. Donec sed imperdiet quam, id dignissim dolor. Curabitur mollis ultricies tempor. Morbi porttitor, turpis et dignissim aliquam, nunc lacus dignissim massa, a consequat nibh est vel turpis. Pellentesque blandit, ante vehicula
        sollicitudin imperdiet, tellus urna fringilla diam, id tempor neque augue eu nisl. Quisque eu sem posuere, vehicula risus ut, ullamcorper massa. Fusce vulputate bibendum erat, vel dapibus dui consectetur nec. Donec mauris mauris, egestas non malesuada
        non, finibus nec lacus. Duis at mauris tincidunt, accumsan augue non, vestibulum libero.</p>
      <p>Vestibulum fermentum vulputate lectus, at sollicitudin diam laoreet vitae. Aliquam erat volutpat. Nulla condimentum, arcu nec suscipit ultrices, urna tortor rutrum purus, sed mollis lacus ligula vitae justo. Duis vitae malesuada sem, eget finibus
        nibh. Etiam facilisis, urna ac blandit molestie, quam velit congue nibh, ac.</p>

    </div>
    <!-- end panel -->
    <div class="fade"></div>
  </div>
  <!-- end panel-wrapper -->

</body>

</html>

Luaskan cuplikan

Answer 16

Anda dapat menyembunyikan kotak centang, tetapi mengizinkannya untuk dicentang / tidak dicentang melalui yang terkait <label> elemen yang .

Berdasarkan apakah kotak centang tersebut dicentang atau tidak, Anda dapat menyembunyikan / menampilkan teks tambahan, dan bahkan mengubah teks label dari "Lainnya" menjadi "Lebih Sedikit".

Saya telah menyertakan beberapa detail tambahan di CSS sehingga maksud setiap definisi bisa sedikit lebih jelas.

1. Dengan satu tombol toggle "More" / "Less":

.more-text, #more-checkbox {          /* Hide the second paragraph and checkbox */
  display: none;
}

input:checked ~ .more-text {          /* Show the second paragraph when checked */
  display: block;
}

.more-label::after {                  /* Label underline, hand cursor, color */
  cursor: pointer;
  text-decoration: underline;
  color: #666;
}

input ~ .more-label::after {          /* Set label text to "More" by default */
  content: 'More';
}

input:checked ~ .more-label::after {  /* Set label text to "Less" when checked */
  content: 'Less';
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.
</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox"></label>

<p class="more-text">
  Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

Luaskan cuplikan

2. Dengan tombol "Lainnya" di bagian atas dan tombol "Kurangi" di bagian bawah:

.more-text, #more-checkbox, .less-label {
  display: none;
}

.more-label, .less-label {          
  cursor: pointer;
  text-decoration: underline; 
  color: #666;
}

input:checked ~ .more-text, input:checked ~ .less-label {
  display: block;
}

input:checked ~ .more-label {
  display: none;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox">More</label>

<p class="more-text">
  Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

<label class="less-label" for="more-checkbox">Less</label>

Luaskan cuplikan

Answer 17

Secara teknis, dimungkinkan untuk mengubah visibilitas teks berdasarkan saat Anda mengklik tombol atau link, seperti yang ditunjukkan di bawah ini:

.hidden-text {
  display: none;
}

.toggle-text:focus + .hidden-text {
  display: block;
}

<p>
  This is an example with no hidden content until you... <a href="#" class="toggle-text">read more</a>!
  <span class="hidden-text">Now I'm visible!!!</span>
</p>

Luaskan cuplikan

Karena itu, saya sangat menyarankan agar Anda membiasakan diri dengan JavaScript karena solusi menggunakan JavaScript untuk sesuatu seperti ini jauh lebih sederhana dan memungkinkan fleksibilitas tambahan.

Answer 18

Ini tergantung pada browser yang memfokuskan tautan saat Anda mengekliknya, yang tidak diperlukan standar (setidaknya terakhir kali saya mencentang), dan yang tidak dilakukan oleh semua browser (misalnya, ini tidak berfungsi di Safari). Menggunakan: diperiksa atau: target mungkin akan lebih baik.

chridd

Answer 19

Ya, Anda dapat melakukannya hanya dengan menggunakan HTML dan CSS.

body { padding: 20px; }

div { margin-top: 10px; border: 1px solid black; width: 200px; height: 100px;
    padding: 5px;
}
input:checked + label + div { display: none; }
input + label:after { content: " To Hide"; }
input:checked + label:after { content: " To Show"; }

label {
    background-color: yellow;
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
    border-radius: 4px;
    font-size: 16px;
    display: inline-block;
    padding: 2px 5px;
    cursor: pointer;
}

<input type='checkbox' style='display: none' id=cb>
<label for=cb>Click Here</label>
<div>
    Hello. This is some stuff.
</div>

Luaskan cuplikan

Answer 20

4

Halo monir alhussini, selamat datang di Stack Overflow. Bolehkah saya memberikan komentar tentang cara meningkatkan jawaban Anda? Kode Anda bekerja dengan sangat baik (setidaknya di browser saya), tetapi dengan beberapa konteks, itu akan membuat jawaban yang lebih baik; misalnya, Anda dapat menjelaskan bagaimana dan mengapa perubahan yang diusulkan ini akan menyelesaikan masalah penanya, mungkin menyertakan tautan ke dokumentasi yang relevan. Itu akan membuatnya lebih berguna bagi mereka, dan juga lebih berguna bagi pembaca situs lain yang mencari solusi untuk masalah serupa.

Vince Bowdren

Answer 21

sekarang Anda dapat menyembunyikan / menampilkan teks hanya dengan menggunakan CSS juga! Jika Anda menggunakan input teks dan ingin menampilkan / menyembunyikan teks berdasarkan status kotak input, Anda dapat menggunakan pseudo-class CSS baru :placeholder-shownuntuk <input>atau <textarea>. Berikut adalah contoh / demo dari pseudo-class yang disebutkan di atas !:

/* Some base style  */
.app {
  margin: 10px auto;
  padding: 10px;
}

code {
  background-color: lightgray;
  padding: 4px;
}

input {
  padding: 5px 10px;
}

input:focus {
  outline: none;
}

/* When there is something in input box give 
  it a solid blue border */

input:not(:placeholder-shown) {
  border: solid 2px #42A5F5
}

/* Hide the p initially */
p {
  background-color: #F0F4C3;
  padding: 5px;
  opacity: 0;
  transition: all 300ms ease-in-out;
}


/* Show the p when the placeholder is not shown. 
  i.e. Something is in the input box and placeholder is gone */
input:not(:placeholder-shown)+p {
  opacity: 1
}

<div class="app">
  <h1>Hide/Show Text using input's <code>:placehoder-shown</code> psuedo class!</h1>
  <label for="name">Enter your name</label>
  <input type="text" id="name" placeholder="Your Name">
  <p class="msg">Well done!</p>
</div>

Luaskan cuplikan

Ini Link ke Dokumen MDN.

Ini adalah teknologi eksperimental Periksa tabel kompatibilitas Browser dengan cermat sebelum menggunakan ini dalam produksi.

Answer 22

Mungkin seseorang akan menemukan solusi ini lebih intuitif dan lebih mudah diterapkan. Mekanismenya adalah bahwa tautan menargetkan dirinya sendiri dan dalam hal ini mudah untuk memilih apa pun yang berikutnya di DOM.

.toggle-hide,
.toggle-content {
  display: none;
}
.toggle-show:target + .toggle-hide,
.toggle-show:target + .toggle-hide + .toggle-content {
  display: block;
}
.toggle-show:target {
  display: none;
}

<a id="target" class="toggle-show" href="#target">Show</a>
<a class="toggle-hide" href="#" >Hide</a>
<p class="toggle-content">Lorem ipsum</p>

Luaskan cuplikan

Answer 23

-3

Menggunakan "display: none;" attribute.

Ajay Munugala
sumber

Hai @Ajay, terima kasih atas kontribusi Anda. Namun, Anda tampaknya hanya menjawab setengah pertanyaan: Anda telah menunjukkan cara menyembunyikannya, tetapi bukan cara menampilkannya, dan beralih di antara dua status dengan CSS

Charlie Harding

tampilan: blok; akan memperlihatkannya.

Ajay Munugala

Dan bagaimana Anda menggunakan CSS untuk menangani klik, untuk beralih di antara status, seperti pertanyaan yang diajukan?

Charlie Harding

Answer 24

Hai @Ajay, terima kasih atas kontribusi Anda. Namun, Anda tampaknya hanya menjawab setengah pertanyaan: Anda telah menunjukkan cara menyembunyikannya, tetapi bukan cara menampilkannya, dan beralih di antara dua status dengan CSS

Charlie Harding

Answer 25

tampilan: blok; akan memperlihatkannya.

Ajay Munugala

Answer 26

Dan bagaimana Anda menggunakan CSS untuk menangani klik, untuk beralih di antara status, seperti pertanyaan yang diajukan?

Charlie Harding

Bisakah teks disembunyikan dan ditampilkan hanya dengan CSS (tanpa kode JavaScript)? [Tutup]

Jawaban: