1

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

7
  • такое не возможно) тебе нужен js для этого точнее слушатель на клик как минимум
    – Armen
    Commented 12 дек. 2020 в 2:36
  • @Armen: с чего Вы взяли, что это невозможно без JS ? Простой "аккордеон".
    – UModeL
    Commented 12 дек. 2020 в 4:45
  • @UModeL и как вы забирайтесь симулировать клик?
    – Armen
    Commented 12 дек. 2020 в 5:40
  • @UModeL вы правы как вариант можно через input type radio checked просто после js такое решение как то в голову не приходит
    – Armen
    Commented 12 дек. 2020 в 6:46
  • 1
    @RecentFlow youtube.com/watch?v=Zd-FJW9WPf0 тут обясняется как это делать
    – Armen
    Commented 12 дек. 2020 в 6:46

1 ответ 1

4

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

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.sstatic.net/sIyAM.jpg) -304px -110px / auto no-repeat; }
.inbox { background: url(https://i.sstatic.net/sIyAM.jpg) -302px -392px / auto no-repeat; }
.team { background: url(https://i.sstatic.net/sIyAM.jpg) -302px -470px / auto no-repeat; }
.arr_down {
  margin-left: auto;
  background: url(https://i.sstatic.net/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.sstatic.net/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.sstatic.net/sIyAM.jpg) -304px -110px / auto no-repeat; }
.inbox { background: url(https://i.sstatic.net/sIyAM.jpg) -302px -392px / auto no-repeat; }
.team { background: url(https://i.sstatic.net/sIyAM.jpg) -302px -470px / auto no-repeat; }
.arr_down {
  margin-left: auto;
  background: url(https://i.sstatic.net/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.sstatic.net/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>

1

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.