форумчане, подскажите пожалуйста как сверстать нижеуказанную страницу на чистом CSS, чтобы при нажатии на 'STATISTICS' и другие элементы на его подобии ниже появлялось окно с информацией и при повтором нажатии на 'STATISTICS' оно скрывалось. Уже долго не могу понять ,как это сверстать, до js пока еще не дорос.
-
такое не возможно) тебе нужен js для этого точнее слушатель на клик как минимум– ArmenCommented 12 дек. 2020 в 2:36
-
@Armen: с чего Вы взяли, что это невозможно без JS ? Простой "аккордеон".– UModeLCommented 12 дек. 2020 в 4:45
-
@UModeL и как вы забирайтесь симулировать клик?– ArmenCommented 12 дек. 2020 в 5:40
-
@UModeL вы правы как вариант можно через input type radio checked просто после js такое решение как то в голову не приходит– ArmenCommented 12 дек. 2020 в 6:46
-
1@RecentFlow youtube.com/watch?v=Zd-FJW9WPf0 тут обясняется как это делать– ArmenCommented 12 дек. 2020 в 6:46
|
Показать ещё 2 комментария
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.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>
-
2