Помогите сверстать выпадающий элемент

Question

форумчане, подскажите пожалуйста как сверстать нижеуказанную страницу на чистом CSS, чтобы при нажатии на 'STATISTICS' и другие элементы на его подобии ниже появлялось окно с информацией и при повтором нажатии на 'STATISTICS' оно скрывалось. Уже долго не могу понять ,как это сверстать, до js пока еще не дорос.

Answer 1

Независимое раскрытие/скрытие блоков:

body {
  margin: 0; min-height: 100vh;
  background-color: rgba(255, 255, 255, 1);
  display: flex; justify-content: space-around;
}

.wrap {
  display: flex; flex-flow: column nowrap;
  width: 80vw;
}

.block {
  display: flex; flex-flow: column nowrap;
  margin: .5em 0;
  border-radius: .5em;
  background-color: #fff;
  box-shadow: 0 0 15px -5px #000a;
}

label {
  display: flex; flex-flow: row nowrap;
  padding: .5em;
}

.icon { height: 30px; width: 30px; }
.statistics { background: url(https://i.stack.imgur.com/sIyAM.jpg) -304px -110px / auto no-repeat; }
.inbox { background: url(https://i.stack.imgur.com/sIyAM.jpg) -302px -392px / auto no-repeat; }
.team { background: url(https://i.stack.imgur.com/sIyAM.jpg) -302px -470px / auto no-repeat; }
.arr_down {
  margin-left: auto;
  background: url(https://i.stack.imgur.com/sIyAM.jpg) -1114px -108px / auto no-repeat;
}

.title {
  display: flex; align-items: center;
  margin-left: 1em;
  text-transform: uppercase;
}

input { display: none; }

.content {
  display: inline-block;
  height: 175px;
  padding: 0 .5em;
  transform-origin: 50% 0%;
  transform: scaleY(1);
  transition: .5s ease-in;
}
input:not(:checked)+.content {
  height: 0px;
  transform: scaleY(0);
}

.img {
  display: inline-block;
  height: 120px; min-width: 160px;
  float: left; margin-right: 1em;
  background: url(https://i.stack.imgur.com/sIyAM.jpg) -306px -160px / auto no-repeat;
}

.text { font: 14px sans-serif; }

<div class="wrap">
  <div class="block">
    <label for="statistics"><div class="icon statistics"></div><div class="title">statistics</div><div class="icon arr_down"></div></label>
    <input type="checkbox" id="statistics">
    <div class="content">
      <div class="text">
        <img class="img">форумчане, подскажите пожалуйста как сверстать нижеуказанную страницу на чистом CSS, чтобы при нажатии на 'STATISTICS' и другие элементы на его подобии ниже появлялось окно с информацией и при повтором нажатии на 'STATISTICS'
        оно скрывалось. Уже долго не могу понять ,как это сверстать, до js пока еще не дорос.</div>
    </div>
  </div>
  <div class="block">
    <label for="inbox"><div class="icon inbox"></div><div class="title">inbox</div><div class="icon arr_down"></div></label>
    <input type="checkbox" id="inbox">
    <div class="content">
      <div class="text">
        <img class="img">форумчане, подскажите пожалуйста как сверстать нижеуказанную страницу на чистом CSS, чтобы при нажатии на 'STATISTICS' и другие элементы на его подобии ниже появлялось окно с информацией и при повтором нажатии на 'STATISTICS'
        оно скрывалось. Уже долго не могу понять ,как это сверстать, до js пока еще не дорос.</div>
    </div>
  </div>
  <div class="block">
    <label for="team"><div class="icon team"></div><div class="title">team</div><div class="icon arr_down"></div></label>
    <input type="checkbox" id="team">
    <div class="content">
      <div class="text">
        <img class="img">форумчане, подскажите пожалуйста как сверстать нижеуказанную страницу на чистом CSS, чтобы при нажатии на 'STATISTICS' и другие элементы на его подобии ниже появлялось окно с информацией и при повтором нажатии на 'STATISTICS'
        оно скрывалось. Уже долго не могу понять ,как это сверстать, до js пока еще не дорос.</div>
    </div>
  </div>
</div>

В следующем примере, может быть раскрытым только один блок:

body {
  margin: 0; min-height: 100vh;
  background-color: rgba(255, 255, 255, 1);
  display: flex; justify-content: space-around;
}

.wrap {
  display: flex; flex-flow: column nowrap;
  width: 80vw;
}

.block {
  display: flex; flex-flow: column nowrap;
  margin: .5em 0;
  border-radius: .5em;
  background-color: #fff;
  box-shadow: 0 0 15px -5px #000a;
}

label {
  display: flex; flex-flow: row nowrap;
  padding: .5em;
}

.icon { height: 30px; width: 30px; }
.statistics { background: url(https://i.stack.imgur.com/sIyAM.jpg) -304px -110px / auto no-repeat; }
.inbox { background: url(https://i.stack.imgur.com/sIyAM.jpg) -302px -392px / auto no-repeat; }
.team { background: url(https://i.stack.imgur.com/sIyAM.jpg) -302px -470px / auto no-repeat; }
.arr_down {
  margin-left: auto;
  background: url(https://i.stack.imgur.com/sIyAM.jpg) -1114px -108px / auto no-repeat;
}

.title {
  display: flex; align-items: center;
  margin-left: 1em;
  text-transform: uppercase;
}

input { display: none; }

.content {
  display: inline-block;
  height: 175px;
  padding: 0 .5em;
  transform-origin: 50% 0%;
  transform: scaleY(1);
  transition: .5s ease-in;
}
input:not(:checked)+.content {
  height: 0px;
  transform: scaleY(0);
}

.img {
  display: inline-block;
  height: 120px; min-width: 160px;
  float: left; margin-right: 1em;
  background: url(https://i.stack.imgur.com/sIyAM.jpg) -306px -160px / auto no-repeat;
}

.text { font: 14px sans-serif; }

<div class="wrap">
  <div class="block">
    <label for="statistics"><div class="icon statistics"></div><div class="title">statistics</div><div class="icon arr_down"></div></label>
    <input type="radio" name="info" id="statistics">
    <div class="content">
      <div class="text">
        <img class="img">форумчане, подскажите пожалуйста как сверстать нижеуказанную страницу на чистом CSS, чтобы при нажатии на 'STATISTICS' и другие элементы на его подобии ниже появлялось окно с информацией и при повтором нажатии на 'STATISTICS'
        оно скрывалось. Уже долго не могу понять ,как это сверстать, до js пока еще не дорос.</div>
    </div>
  </div>
  <div class="block">
    <label for="inbox"><div class="icon inbox"></div><div class="title">inbox</div><div class="icon arr_down"></div></label>
    <input type="radio" name="info" id="inbox">
    <div class="content">
      <div class="text">
        <img class="img">форумчане, подскажите пожалуйста как сверстать нижеуказанную страницу на чистом CSS, чтобы при нажатии на 'STATISTICS' и другие элементы на его подобии ниже появлялось окно с информацией и при повтором нажатии на 'STATISTICS'
        оно скрывалось. Уже долго не могу понять ,как это сверстать, до js пока еще не дорос.</div>
    </div>
  </div>
  <div class="block">
    <label for="team"><div class="icon team"></div><div class="title">team</div><div class="icon arr_down"></div></label>
    <input type="radio" name="info" id="team">
    <div class="content">
      <div class="text">
        <img class="img">форумчане, подскажите пожалуйста как сверстать нижеуказанную страницу на чистом CSS, чтобы при нажатии на 'STATISTICS' и другие элементы на его подобии ниже появлялось окно с информацией и при повтором нажатии на 'STATISTICS'
        оно скрывалось. Уже долго не могу понять ,как это сверстать, до js пока еще не дорос.</div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Помогите сверстать выпадающий элемент

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