Как сделать чтобы по клику менялся блок с изображениями на css ? (до первого клика чтоб не показывался)

Question

Всем привет) Тренируюсь на одном макете, столкнулся с такой задачей. У меня есть менюшка из 5 ссылок.
Мне нужно чтобы при клике на 1 ссылку раскрывался блок с изображениями, при клике на 2 ссылку, показывался следующий и т.д.
Возможно ли это реализовать на чистом CSS ?
пробовал найти конструкции в интернете типа, если нажать на кнопку должно раскрыться определенное, но не понимаю как написать правильно на англ. Оч буду рад ответам)
Ещё у меня блок изображений через display:grid

.galerry_item {
  text-align: center;
  width: 100%;
  height: 175px;
  background: grey;
  border: 1px solid white;
}

.galerry_item:hover {
  background: black;
}

<div class="work_gallery">
  <div class="galerry_item">3123213123</div>
  <div class="galerry_item">3123</div>
  <div class="galerry_item">3123</div>
  <div class="galerry_item">1</div>
  <div class="galerry_item">1</div>
  <div class="galerry_item">1</div>
  <div class="galerry_item">1</div>
  <div class="galerry_item">1</div>
  <div class="galerry_item">1</div>
</div>

Answer 1

Если я правильно понял, вам нужны вкладки (табы), но реализованные на CSS, если так, то вот один из вариантов:

.tabs-block {
  display: block;
  width: 100%;
}

.tabs-block .tabs-input {
  display: none;
}

.tabs-block .-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.tabs-block .-buttons > label {
  display: inline-block;
  padding: 4px 8px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.tabs-block .-content {
  display: block;
  width: 100%;
}

.tabs-block .-content > div {
  display: none;
}

/**/
#tabs_red:checked ~ .-buttons label[for="tabs_red"],
#tabs_blue:checked ~ .-buttons label[for="tabs_blue"],
#tabs_green:checked ~ .-buttons label[for="tabs_green"],
#tabs_orange:checked ~ .-buttons label[for="tabs_orange"],
#tabs_violet:checked ~ .-buttons label[for="tabs_violet"] {
  color: green;
  background: #ccc;
}

#tabs_red:checked ~ .-content #_tabs_red,
#tabs_blue:checked ~ .-content #_tabs_blue,
#tabs_green:checked ~ .-content #_tabs_green,
#tabs_orange:checked ~ .-content #_tabs_orange,
#tabs_violet:checked ~ .-content #_tabs_violet {
  display: block;
}

<div class="tabs-block">
  <!-- Переключатели, они будут скрыты -->
  <input class="tabs-input" id="tabs_red" type="radio" name="tabs" checked>
  <input class="tabs-input" id="tabs_blue" type="radio" name="tabs">
  <input class="tabs-input" id="tabs_green" type="radio" name="tabs">
  <input class="tabs-input" id="tabs_orange" type="radio" name="tabs">
  <input class="tabs-input" id="tabs_violet" type="radio" name="tabs">
  <!-- -->
  <div class="-buttons">
    <label for="tabs_red">Red</label>
    <label for="tabs_blue">Blue</label>
    <label for="tabs_green">Green</label>
    <label for="tabs_orange">Orange</label>
    <label for="tabs_violet">Violet</label>
  </div>
  <div class="-content">
    <div id="_tabs_red">
      <img src="https://via.placeholder.com/100/F00/FFF">
      <img src="https://via.placeholder.com/100/F00/FFF">
      <img src="https://via.placeholder.com/100/F00/FFF">
      <img src="https://via.placeholder.com/100/F00/FFF">
    </div>
    <div id="_tabs_blue">
      <img src="https://via.placeholder.com/100/00ABFF/FFF">
      <img src="https://via.placeholder.com/100/00ABFF/FFF">
      <img src="https://via.placeholder.com/100/00ABFF/FFF">
      <img src="https://via.placeholder.com/100/00ABFF/FFF">
    </div>
    <div id="_tabs_green">
      <img src="https://via.placeholder.com/100/2FD72F/FFF">
      <img src="https://via.placeholder.com/100/2FD72F/FFF">
      <img src="https://via.placeholder.com/100/2FD72F/FFF">
      <img src="https://via.placeholder.com/100/2FD72F/FFF">
    </div>
    <div id="_tabs_orange">
      <img src="https://via.placeholder.com/100/FF8F00/FFF">
      <img src="https://via.placeholder.com/100/FF8F00/FFF">
      <img src="https://via.placeholder.com/100/FF8F00/FFF">
      <img src="https://via.placeholder.com/100/FF8F00/FFF">
    </div>
    <div id="_tabs_violet">
      <img src="https://via.placeholder.com/100/7C1ECA/FFF">
      <img src="https://via.placeholder.com/100/7C1ECA/FFF">
      <img src="https://via.placeholder.com/100/7C1ECA/FFF">
      <img src="https://via.placeholder.com/100/7C1ECA/FFF">
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как сделать чтобы по клику менялся блок с изображениями на css ? (до первого клика чтоб не показывался)

Ответы (1 шт):