Класс .select
работает по принципу тега select
, .screen
отображает выбранный нами слева .select-box
(выбранный по атрибуту data-value="x"
который отобразит .screen-slide
по соответствующему атрибуту id="x"
).
Как это можно реализовать через jQuery? (первый .screen-slide
должен отображать при загрузке страницы)
.box {
display: flex;
height: 600px;
}
.box .select {
max-width: 100%;
width: 320px;
overflow-y: scroll;
max-height: 100%;
height: 600px;
}
.box .select-box {
padding: 51px;
display: flex;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.box .select-box:first-child {
border-top: 0;
}
.box .select-box:last-child {
border-bottom: 0;
}
.box .select-box p {
font-size: 20px;
color: #9fa9a9;
margin: auto;
}
.box .select-box i {
margin-right: 10px;
font-size: 48px;
color: #3d3e42;
}
.box .screen {
width: 500px;
max-width: 100%;
margin: 0 auto;
height: 600px;
}
.box .screen-slide {
display: none;
}
.box .screen h1 {
font-size: 24px;
font-weight: 700;
color: #636c6c;
}
.box .screen p {
font-size: 16px;
color: #afb8b8;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div class="select">
<div class="select-box" data-value="1">
<i class="fa fa-envelope-o"></i>
<p>Heading title one</p>
</div>
<div class="select-box" data-value="2">
<i class="fa fa-music"></i>
<p>Heading title one</p>
</div>
<div class="select-box" data-value="3">
<i class="fa fa-heart"></i>
<p>Heading title one</p>
</div>
<div class="select-box" data-value="4">
<i class="fa fa-user"></i>
<p>Heading title one</p>
</div>
<div class="select-box" data-value="5">
<i class="fa fa-film"></i>
<p>Heading title one</p>
</div>
<div class="select-box" data-value="6">
<i class="fa fa-th-large"></i>
<p>Heading title one</p>
</div>
<div class="select-box" data-value="7">
<i class="fa fa-th"></i>
<p>Heading title one</p>
</div>
<div class="select-box" data-value="8">
<i class="fa fa-check"></i>
<p>Heading title one</p>
</div>
<div class="select-box" data-value="9">
<i class="fa fa-glass"></i>
<p>Heading title one</p>
</div>
<div class="select-box" data-value="10">
<i class="fa fa-star-o"></i>
<p>Heading title one</p>
</div>
</div>
<div class="screen">
<div id="1" class="screen-slide">
<h1>Heading Feature title goes here</h1>
<p>
Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
</p>
</div>
<div id="2" class="screen-slide">
<h1>Heading Feature title goes here</h1>
<p>
Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
</p>
</div>
<div id="3" class="screen-slide">
<h1>Heading Feature title goes here</h1>
<p>
Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
</p>
</div>
<div id="4" class="screen-slide">
<h1>Heading Feature title goes here</h1>
<p>
Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
</p>
</div>
<div id="5" class="screen-slide">
<h1>Heading Feature title goes here</h1>
<p>
Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
</p>
</div>
<div id="6" class="screen-slide">
<h1>Heading Feature title goes here</h1>
<p>
Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
</p>
</div>
<div id="7" class="screen-slide">
<h1>Heading Feature title goes here</h1>
<p>
Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
</p>
</div>
<div id="8" class="screen-slide">
<h1>Heading Feature title goes here</h1>
<p>
Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
</p>
</div>
<div id="9" class="screen-slide">
<h1>Heading Feature title goes here</h1>
<p>
Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
</p>
</div>
<div id="10" class="screen-slide">
<h1>Heading Feature title goes here</h1>
<p>
Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
</p>
</div>
</div>
</div>