"Select Show/Hide Detail"
Bootstrap 4.1.1 Snippet by yui.napassorn

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="grid-container">
<div class="grid-item">
<div class="select-item img1"> Text 1</div>
<div class="select-item-show" id="#myDIV1">
<div class="icon-select"></div>
<div class="select-block">
<div class="select-detail"> Text 1</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="select-item img2"></div>
<div class="select-item-show">
<div class="icon-select" id="#myDIV2"></div>
<div class="select-block">
<div class="select-detail"> Text 2 </div>
</div>
</div>
</div>
<div class="grid-item">
<div class="select-item img3 "></div>
<div class="select-item-show" id="#myDIV3">
<div class="icon-select"></div>
<div class="select-block">
<div class="select-detail"> Text 3 </div>
</div>
</div>
</div>
<div class="grid-item">
<div class="select-item img4"></div>
<div class="select-item-show" id="#myDIV4">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{padding:5%;}
.grid-container{
clear: both;
padding: 0;
margin: 0;
display: grid;
grid-template-columns:214px 214px 214px 214px 214px;
grid-gap: 20px 10px;
}
.grid-item{
padding: 0;
margin: 0;
}
.grid-item .select-item{
display:block;
position:relative;
cursor:pointer;
background: #273c75;
height: 150px;
padding:5%;
margin:0;
color: #fff;
text-align: center;
}
.grid-item .select-item-show{
display: none;
clear: both;
}
.grid-item .select-item-show .icon-select{display: block;}
.grid-item .select-item-show .select-block{
display: block;
height: 150px;
}
.grid-item .select-item-show .select-block .select-detail{
display: block;
position:absolute;
border: 6px solid #c23616;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$('.grid-item').click(function() {
$(this).siblings().removeClass('grid-item-select');
$(this).addClass('grid-item-select');
});
$(document).ready(function(){
$(".img1").click(function(){
$("#myDIV1").toggle();
});
$(".img2").click(function(){
$("#myDIV2").toggle();
});
$(".img3").click(function(){
$("#myDIV3").toggle();
});
$(".img4").click(function(){
$("#myDIV4").toggle();
});
$(".img5").click(function(){
$("#myDIV5").toggle();
});
$(".img6").click(function(){
$("#myDIV6").toggle();
});
$(".img7").click(function(){
$("#myDIV7").toggle();
});
$(".img8").click(function(){
$("#myDIV8").toggle();
});
$(".img9").click(function(){
$("#myDIV9").toggle();
});
$(".img10").click(function(){
$("#myDIV10").toggle();
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: