show hidden w css

Question

Cześć.

Czy można w samym css ustawić, aby po klikaniu wybranego buttona część divów stawała się ukryta, a jeden odkryty?

JS można wyłączać, a ta opcja potrzebna.

Answer 1

W razie braku niedziałającego JS-a można te divy po prostu zawsze pokazywać… I to jest najsensowniejsza opcja. Przyciski, które działają bez JS, są nie do strawienia dla technologii asystującej.

Answer 2

Można użyć trik z ukrytym checkboxem

/* Checkbox Hack */

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
label { 
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: inline-block;
  margin: 60px 0 10px 0;
  cursor: pointer;
}

/* Default State */
div {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
}

/* Toggled State */
input[type=checkbox]:checked ~ div {
   display: none;
}

https://codepen.io/anon/pen/rKJYNx

Answer 3

Można użyć :target

<viv class="container">
<a href="#aaa"><button>UKRYJ DIV</button></a>
<div id="bbb"></div>
<div id="aaa">
  <div></div>
  <div></div>
  <div></div>
</div>
<a href="#"><button>POKAZ DIV</button></a>
</div>

body{
  background-color: #25025d;
}
*{
  transition: all .5s;
}
.container{
  display: flex;
  flex-direction:  column;
  justify-content: center;
  width: 500px;
  margin: 0 auto;
  background-color: #d00037;
  padding: 50px 10px;
}
a{
  display: block;
  width: 100px;
  margin: 0 auto;
}
button{
  width: 100px;
  height: 30px;
  border: none;
  background-color: #471936;
  color: #fff;
  cursor: pointer;
}
button:hover{
  background-color: #a8859b;
  color: #471936;
}
#aaa, #bbb {
display: flex;
justify-content:  space-evenly;
align-items:  center;
background-color: #b9a3e0;
width: 400px;
height: 100px;
color: white;
text-align: center;
margin: 10px auto;
}

div div{
background-color: #6d172d;
width: 100px;
height: 50px;
}

@keyframes opacityDiv {
    from {opacity: 1;}
    to {opacity: 0;}
}

:target{
  animation: opacityDiv 5s ease-in-out;
  animation-fill-mode:forwards;
}

 

Comments

Łączenie linku i przycisku nie działa choćby na linku, nie mówiąc o obsłudze tego z poziomu klawiatury.

---

komentarz 11 minuty temu przez Comandeer Mentor (408,670 p.) Łączenie linku i przycisku nie działa choćby na linku

Nie rozumiem.

Czyli bez buttona byłoby ok?

---

Ogólnie nie jestem zwolennikiem interakcji przy pomocy CSS-a, bo to nie pozwala choćby na zmienienie odpowiednich atrybutów ARIA czy daje raptem minimalną kontrolę nad focusem.

---

Rozumiem. Na stronie developer mozilla  jest taki przykład z podświetlaniem tekstu przy użyciu tej techniki.