<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-fluid mt-3 "> <div class="row"> <div data-card-selectable="true" data-card-selected="false" class="card mr-3 mb-3" style="width: 18rem;"> <div class="card-header"> <h5 class="card-title">Multiselectable card</h5> </div> <div class="card-body"> <p class="card-text">Hello.<br/>Click on any card for select it. You can select multiple cards keeping pressed Ctrl key. You can even unselect a selected card pressing Ctrl key+click on the card.<br/>Enjoy</p> <p class="text-muted">To be honest, you can use this script for any element of your page, just add the "data-card-selectable" and "data-card-selected" to your elements</p> <a href="#" class="btn btn-outline-primary">do something</a> </div> </div> <div data-card-selectable="true" data-card-selected="false" class="card mr-3 mb-3" style="width: 18rem;"> <div class="card-header"> <h5 class="card-title">Multiselectable card</h5> </div> <div class="card-body"> <p class="card-text">Hello.<br/>Click on any card for select it. You can select multiple cards keeping pressed Ctrl key. You can even unselect a selected card pressing Ctrl key+click on the card.<br/>Enjoy</p> <p class="text-muted">To be honest, you can use this script for any element of your page, just add the "data-card-selectable" and "data-card-selected" to your elements</p> <a href="#" class="btn btn-outline-primary">do something</a> </div> </div> <div data-card-selectable="true" data-card-selected="false" class="card mr-3 mb-3" style="width: 18rem;"> <div class="card-header"> <h5 class="card-title">Multiselectable card</h5> </div> <div class="card-body"> <p class="card-text">Hello.<br/>Click on any card for select it. You can select multiple cards keeping pressed Ctrl key. You can even unselect a selected card pressing Ctrl key+click on the card.<br/>Enjoy</p> <p class="text-muted">To be honest, you can use this script for any element of your page, just add the "data-card-selectable" and "data-card-selected" to your elements</p> <a href="#" class="btn btn-outline-primary">do something</a> </div> </div> <div data-card-selectable="true" data-card-selected="false" class="card mr-3 mb-3" style="width: 18rem;"> <div class="card-header"> <h5 class="card-title">Multiselectable card</h5> </div> <div class="card-body"> <p class="card-text">Hello.<br/>Click on any card for select it. You can select multiple cards keeping pressed Ctrl key. You can even unselect a selected card pressing Ctrl key+click on the card.<br/>Enjoy</p> <p class="text-muted">To be honest, you can use this script for any element of your page, just add the "data-card-selectable" and "data-card-selected" to your elements</p> <a href="#" class="btn btn-outline-primary">do something</a> </div> </div> <div data-card-selectable="true" data-card-selected="false" class="card mr-3 mb-3" style="width: 18rem;"> <div class="card-header"> <h5 class="card-title">Multiselectable card</h5> </div> <div class="card-body"> <p class="card-text">Hello.<br/>Click on any card for select it. You can select multiple cards keeping pressed Ctrl key. You can even unselect a selected card pressing Ctrl key+click on the card.<br/>Enjoy</p> <p class="text-muted">To be honest, you can use this script for any element of your page, just add the "data-card-selectable" and "data-card-selected" to your elements</p> <a href="#" class="btn btn-outline-primary">do something</a> </div> </div> <div data-card-selectable="true" data-card-selected="false" class="card mr-3 mb-3" style="width: 18rem;"> <div class="card-header"> <h5 class="card-title">Multiselectable card</h5> </div> <div class="card-body"> <p class="card-text">Hello.<br/>Click on any card for select it. You can select multiple cards keeping pressed Ctrl key. You can even unselect a selected card pressing Ctrl key+click on the card.<br/>Enjoy</p> <p class="text-muted">To be honest, you can use this script for any element of your page, just add the "data-card-selectable" and "data-card-selected" to your elements</p> <a href="#" class="btn btn-outline-primary">do something</a> </div> </div> <div data-card-selectable="true" data-card-selected="false" class="card mr-3 mb-3" style="width: 18rem;"> <div class="card-header"> <h5 class="card-title">Multiselectable card</h5> </div> <div class="card-body"> <p class="card-text">Hello.<br/>Click on any card for select it. You can select multiple cards keeping pressed Ctrl key. You can even unselect a selected card pressing Ctrl key+click on the card.<br/>Enjoy</p> <p class="text-muted">To be honest, you can use this script for any element of your page, just add the "data-card-selectable" and "data-card-selected" to your elements</p> <a href="#" class="btn btn-outline-primary">do something</a> </div> </div> <div data-card-selectable="true" data-card-selected="false" class="card mr-3 mb-3" style="width: 18rem;"> <div class="card-header"> <h5 class="card-title">Multiselectable card</h5> </div> <div class="card-body"> <p class="card-text">Hello.<br/>Click on any card for select it. You can select multiple cards keeping pressed Ctrl key. You can even unselect a selected card pressing Ctrl key+click on the card.<br/>Enjoy</p> <p class="text-muted">To be honest, you can use this script for any element of your page, just add the "data-card-selectable" and "data-card-selected" to your elements</p> <a href="#" class="btn btn-outline-primary">do something</a> </div> </div> <div data-card-selectable="true" data-card-selected="false" class="card mr-3 mb-3" style="width: 18rem;"> <div class="card-header"> <h5 class="card-title">Multiselectable card</h5> </div> <div class="card-body"> <p class="card-text">Hello.<br/>Click on any card for select it. You can select multiple cards keeping pressed Ctrl key. You can even unselect a selected card pressing Ctrl key+click on the card.<br/>Enjoy</p> <p class="text-muted">To be honest, you can use this script for any element of your page, just add the "data-card-selectable" and "data-card-selected" to your elements</p> <a href="#" class="btn btn-outline-primary">do something</a> </div> </div> <div data-card-selectable="true" data-card-selected="false" class="card mr-3 mb-3" style="width: 18rem;"> <div class="card-header"> <h5 class="card-title">Multiselectable card</h5> </div> <div class="card-body"> <p class="card-text">Hello.<br/>Click on any card for select it. You can select multiple cards keeping pressed Ctrl key. You can even unselect a selected card pressing Ctrl key+click on the card.<br/>Enjoy</p> <p class="text-muted">To be honest, you can use this script for any element of your page, just add the "data-card-selectable" and "data-card-selected" to your elements</p> <a href="#" class="btn btn-outline-primary">do something</a> </div> </div> <div data-card-selectable="true" data-card-selected="false" class="card mr-3 mb-3" style="width: 18rem;"> <div class="card-header"> <h5 class="card-title">Multiselectable card</h5> </div> <div class="card-body"> <p class="card-text">Hello.<br/>Click on any card for select it. You can select multiple cards keeping pressed Ctrl key. You can even unselect a selected card pressing Ctrl key+click on the card.<br/>Enjoy</p> <p class="text-muted">To be honest, you can use this script for any element of your page, just add the "data-card-selectable" and "data-card-selected" to your elements</p> <a href="#" class="btn btn-outline-primary">do something</a> </div> </div> <div data-card-selectable="true" data-card-selected="false" class="card mr-3 mb-3" style="width: 18rem;"> <div class="card-header"> <h5 class="card-title">Multiselectable card</h5> </div> <div class="card-body"> <p class="card-text">Hello.<br/>Click on any card for select it. You can select multiple cards keeping pressed Ctrl key. You can even unselect a selected card pressing Ctrl key+click on the card.<br/>Enjoy</p> <p class="text-muted">To be honest, you can use this script for any element of your page, just add the "data-card-selectable" and "data-card-selected" to your elements</p> <a href="#" class="btn btn-outline-primary">do something</a> </div> </div> <div data-card-selectable="true" data-card-selected="false" class="card mr-3 mb-3" style="width: 18rem;"> <div class="card-header"> <h5 class="card-title">Multiselectable card</h5> </div> <div class="card-body"> <p class="card-text">Hello.<br/>Click on any card for select it. You can select multiple cards keeping pressed Ctrl key. You can even unselect a selected card pressing Ctrl key+click on the card.<br/>Enjoy</p> <p class="text-muted">To be honest, you can use this script for any element of your page, just add the "data-card-selectable" and "data-card-selected" to your elements</p> <a href="#" class="btn btn-outline-primary">do something</a> </div> </div> <div data-card-selectable="true" data-card-selected="false" class="card mr-3 mb-3" style="width: 18rem;"> <div class="card-header"> <h5 class="card-title">Multiselectable card</h5> </div> <div class="card-body"> <p class="card-text">Hello.<br/>Click on any card for select it. You can select multiple cards keeping pressed Ctrl key. You can even unselect a selected card pressing Ctrl key+click on the card.<br/>Enjoy</p> <p class="text-muted">To be honest, you can use this script for any element of your page, just add the "data-card-selectable" and "data-card-selected" to your elements</p> <a href="#" class="btn btn-outline-primary">do something</a> </div> </div> <div data-card-selectable="true" data-card-selected="false" class="card mr-3 mb-3" style="width: 18rem;"> <div class="card-header"> <h5 class="card-title">Multiselectable card</h5> </div> <div class="card-body"> <p class="card-text">Hello.<br/>Click on any card for select it. You can select multiple cards keeping pressed Ctrl key. You can even unselect a selected card pressing Ctrl key+click on the card.<br/>Enjoy</p> <p class="text-muted">To be honest, you can use this script for any element of your page, just add the "data-card-selectable" and "data-card-selected" to your elements</p> <a href="#" class="btn btn-outline-primary">do something</a> </div> </div> </div> </div>

div[data-card-selectable="true"]:hover { border-style: dashed; border-width: 1px; border-color: #000; opacity: 0.5; cursor: grab; } div[data-card-selected="true"] { border-style: solid !important; border-width: 1px; border-color: #000; background-color: lightgrey; }

jQuery(document).ready(function() { jQuery("div[data-card-selectable='true']").on('click', function() { var didWhat = 'single-select'; if (!window.event.ctrlKey) { jQuery("div[data-card-selectable='true']").each(function() { $(this).attr("data-card-selected", false); }); jQuery(this).attr("data-card-selected", true); } else { let isSelected = $(this).attr("data-card-selected"); if (isSelected == 'true') { jQuery(this).attr("data-card-selected", false); didWhat = 'unselect'; } else { jQuery(this).attr("data-card-selected", true); didWhat = 'multi-select'; } } let cardIndex = $(this).index()+1; switch (didWhat) { case 'single-select': alert('Thank you for select the single card. #'+cardIndex); break; case 'unselect': alert('You just unselected the card. #'+cardIndex); break; case 'multi-select': alert('You are selecting multiple cards at once.'); break; default: alert("wtf"); break; } }); });