<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"> <div class="icon-select"></div> <div class="select-block"> <div class="select-detail"> Text 4 </div> </div> </div> </div> <div class="grid-item"> <div class="select-item img5"></div> <div class="select-item-show" id="#myDIV5"> <div class="icon-select"></div> <div class="select-block"> <div class="select-detail"> Text 5 </div> </div> </div> </div> <div class="grid-item"> <div class="select-item img6"></div> <div class="select-item-show" id="#myDIV6"> <div class="icon-select"></div> <div class="select-block"> <div class="select-detail"> Text 6 </div> </div> </div> </div> <div class="grid-item"> <div class="select-item img7"></div> <div class="select-item-show" id="#myDIV7"> <div class="icon-select"></div> <div class="select-block"> <div class="select-detail">Text 7 </div> </div> </div> </div> <div class="grid-item"> <div class="select-item img8"></div> <div class="select-item-show" id="#myDIV8"> <div class="icon-select"></div> <div class="select-block"> <div class="select-detail">Text 8 </div> </div> </div> </div> <div class="grid-item"> <div class="select-item img9"></div> <div class="select-item-show" id="#myDIV9"> <div class="icon-select"></div> <div class="select-block"> <div class="select-detail">Text 9 </div> </div> </div> </div> <div class="grid-item"> <div class="select-item img10"></div> <div class="select-item-show" id="#myDIV10"> <div class="icon-select"></div> <div class="select-block"> <div class="select-detail">Text 10 </div> </div> </div> </div> </div> </div> <br/> <br/> <center> ในงานจริงใช้ได้ แต่รันบน Snipp ไม่ได้</center>

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; left:13.4%; right:13.4%; height: 150px; } /*-----------------------------------------------------*/ .grid-item-select{ padding: 0; margin: 0; } .grid-item-select .select-item{ display:block; position:relative; cursor:pointer; background: #273c75; height: 150px; padding:5%; margin:0; } .grid-item-select .select-item-show{ display: block; clear: both; margin-bottom:20px; } .grid-item-select .select-item-show .icon-select{ display: block; margin-top:-20px; margin-left:90px; width: 0px; height: 0px; border-top: 20px solid transparent; border-right: 20px solid transparent; border-left: 20px solid transparent; border-bottom: 20px solid #c23616; } .grid-item-select .select-item-show .select-block{ display: block; height: 150px; /* ต้องเผื่อขนาดช่องที่ซ่อนไว้*/ } .grid-item-select .select-item-show .select-block .select-detail{ display: block; position:absolute; border: 6px solid #c23616; left:13.4%; right:13.4%; height: 150px; /* ต้องเผื่อขนาดช่องที่ซ่อน*/ text-align: center; padding:5%; }

$('.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(); }); });