<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <!-- Font awesome --> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="card border-primary mb-3" > <div class="card-header bg-primary text-white"> <a href="#" class="card-link text-white">Data Owner</a></div> <div class="card-body"> <div class="row"> <div class="col-md-12"> <nav class="navbar navbar-light bg-light"> <form class="form-inline"> <input class="form-control mr-sm-2" type="search" placeholder="กลุ่มงาน / สายงาน" aria-label="Search"> <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button> </form> </nav> <br> <h3> Example 1 </h3> <table class="table table-sm border custab "> <thead class='thead-light'> <tr class='table-light'> <th>ID</th> <th>Department / Division Entities</th> </tr> </thead> <tbody > <tr> <td>1</td> <td><a href="#">กลุ่มสื่อสารการตลาด</a> </td> </tr> <tr> <td>2</td> <td><a href="#">สายงานส่งเสริมการตลาด</a></td> </tr> <tr> <td>3</td> <td><a href="#">สายงานสนับสนุนนักขายดิจิทัล</a></td> </tr> <tr> <td>4</td> <td><a href="#">สายงานไทยประกันชีวิต แคร์ เซ็นเตอร์</a></td> </tr> </tbody> </table> <!-- End Table List --> </div> </div> <h3> Example 2 </h3> <br> <div class="row"> <div class="col-md-12"> <div class="card border-secondary" > <ul class="list-group list-group-flush text-primary"> <li class="list-group-item"> <div class="row toggle" id="dropdown-detail-1" data-toggle="detail-1"> <div class="col-xs-10"> กลุ่มทรัพยากรบุคคล </div> <div class="col-xs-2"><i class="fa fa-chevron-down pull-right"></i></div> </div> <div id="detail-1"> <hr></hr> <div class="container"> <div class="fluid-row"> <div class="col-xs-1">สายงานพัฒนาบุคลากร</div> <div class="col-xs-1">สายงานวิชาการ</div> <div class="col-xs-1">สายงานบูรณาการการเรียนรู้</div> <div class="col-xs-1">สายงานทรัพยากรบุคคล</div> <div class="col-xs-1">สายงานการบุคคลฝ่ายขาย</div> <div class="col-xs-1">สายงานบริหารงานสาขา</div> </div> </div> </div> </li> <li class="list-group-item"> <div class="row toggle" id="dropdown-detail-2" data-toggle="detail-2"> <div class="col-xs-10"> กลุ่มสื่อสารการตลาด </div> <div class="col-xs-2"><i class="fa fa-chevron-down pull-right"></i></div> </div> <div id="detail-2"> <hr></hr> <div class="container"> <div class="fluid-row"> <div class="col-xs-1">สายงานส่งเสริมการตลาด</div> <div class="col-xs-1">สายงานสนับสนุนนักขายดิจิทัล</div> <div class="col-xs-1">สายงานไทยประกันชิวต แคร์ เซ็นเตอร์</div> <div class="col-xs-1">ศูนย์บริการข้อมูลตัวแทน</div> <div class="col-xs-1">ส่วนสนับสนุนข้อมูลการตลาด</div> </div> </div> </div> </li> <li class="list-group-item"> <div class="row toggle" id="dropdown-detail-3" data-toggle="detail-3"> <div class="col-xs-10"> กลุ่มประกันชีวิต </div> <div class="col-xs-2"><i class="fa fa-chevron-down pull-right"></i></div> </div> <div id="detail-3"> <hr></hr> <div class="container"> <div class="fluid-row"> <div class="col-xs-1">สายงานรับประกันชีวิตรายบุคคล</div> <div class="col-xs-1">สายงานสนับสนุนการรับประกันชีวิตรายบุคคล</div> <div class="col-xs-1">สายงานรับประกันและออกกรมธรรม์ ธุรกิจพันธมิตร</div> <div class="col-xs-1">สายงานบริการข้อมูล ธุรกิจพันธมิตร</div> <div class="col-xs-1">สายงานบริการผู้เอาประกัน</div> <div class="col-xs-1">สายงานบริการผู้เอาประกัน ธุรกิจพันธมิตร</div> <div class="col-xs-1">สายงานสนับสนุนงานบริการผู้เอาประกัน</div> <div class="col-xs-1"> สายงานสินไหมทดแทน</div> <div class="col-xs-1"> สายงานสินไหมสุขภาพ</div> <div class="col-xs-1">สายงานสนับสนุนงานสินไหม</div> <div class="col-xs-1">สายงานประกันชีวิตหมู่</div> <div class="col-xs-1">สายงานการแพทย์ประกันชีวิต</div> </div> </div> </div> </li> </ul> </div> </div> </div> <!---- Example 3 --> <!-- -------------------> </div> </div> </div> </div>

table.borderless td,table.borderless th{ border: none !important; } .custab{ border: 1px solid #ccc; padding: 5px; margin: 5% 0; box-shadow: 3px 3px 2px #ccc; transition: 0.5s; } .custab:hover{ box-shadow: 3px 3px 0px transparent; transition: 0.5s; }

$(document).ready(function() { $('[id^=detail-]').hide(); $('.toggle').click(function() { $input = $( this ); $target = $('#'+$input.attr('data-toggle')); $target.slideToggle(); }); });