Show Only One DIV Open on Click Event with Same Class jQuery

Question

I have Two Bootstrap cards with different Ids but the same class names. I want to select the open and closing elements without having to write a different function for each ID name. Instead open and close the Hidden Div's classes .card-reveal and .close by the $(this) keyword or some alternative. Any help would be appreciated. Thanks. The CodePen link: https://codepen.io/Corsurath/pen/eYYoZRV

 $(function() { $('#show').on('click', function() { $('.show1').slideToggle('slow'); }); $('.show1.close').on('click', function() { $('.show1').slideToggle('slow'); }); }); $(function() { $('#show2').on('click', function() { $('.show2').slideToggle('slow'); }); $('.show2.close').on('click', function() { $('.show2').slideToggle('slow'); }); }); /*$(function(){ $('#show').on('click', function(){ $('.card-reveal').slideToggle('slow'); }); $('.card-reveal.close').on('click',function(){ $('.card-reveal').slideToggle('slow'); }); });*/

 .card.card-image{ overflow: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }.card.card-image img{ -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }.card.card-image:hover img{ -webkit-transform: scale(1.2) rotate(-7deg); -moz-transform: scale(1.2) rotate(-7deg); -ms-transform: scale(1.2) rotate(-7deg); -o-transform: scale(1.2) rotate(-7deg); transform: scale(1.2) rotate(-7deg); }.card{ font-family: 'Roboto', sans-serif; border:none; margin-top: 10px; position: relative; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }.card.card-content { padding: 10px; background:#1A9AE1; color:white; }.card.card-content.card-title, .card-reveal.card-title{ font-size: 24px; font-weight: 200; }.card.card-reveal{ padding: 20px; position: absolute; background-color: #FFF; width: 100%; overflow-y: auto; /*top: 0;*/ left:0; bottom:0; height: 100%; z-index: 1; display: none; }.card.card-reveal p{ color: rgba(0, 0, 0, 0.71); margin:20px; }.btn-custom{ background-color: transparent; font-size:18px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link href="http://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" /> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="card"> <div class="card-image"> <div class="wrap"> <img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg"> </div><.-- card image --> </div> <div class="card-content bg-light text-dark"> <span class="card-title">Some Title</span> <button type="button" id="show" class="show btn btn-custom pull-right" aria-label="Left Align"> <i class="fa fa-ellipsis-v"></i> </button> </div><:-- card content --> <div class="card-reveal show1"> <span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div><.-- card reveal --> </div> </div> <div class="col-lg-6"> <div class="card"> <div class="card-image"> <div class="wrap"> <img class="img-fluid" src="https.//i.imgur.com/4UOcPM2.jpg"> </div><!-- card image --> </div> <div class="card-content bg-light text-dark"> <span class="card-title">Some Title</span> <button type="button" id="show2" class="show btn btn-custom pull-right" aria-label="Left Align"> <i class="fa fa-ellipsis-v"></i> </button> </div><!-- card content --> <div class="card-reveal show2"> <span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div><!-- card reveal --> </div> </div> </div> </div>

Answer 1

You can manage Multiple cards to toggle by traversing DOM on button clicks

Here is Demo

 jQuery(document).ready(function($) { $(function(){ $('.card-content button.show').on('click', function(){ $(this).parents('.card-content').siblings('.card-reveal').slideToggle('slow'); }); $('.card-reveal button.close').on('click', function(){ $(this).parents('.card-reveal').slideToggle('slow'); }); }); });

 .card.card-image{ overflow: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }.card.card-image img{ -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }.card.card-image:hover img{ -webkit-transform: scale(1.2) rotate(-7deg); -moz-transform: scale(1.2) rotate(-7deg); -ms-transform: scale(1.2) rotate(-7deg); -o-transform: scale(1.2) rotate(-7deg); transform: scale(1.2) rotate(-7deg); }.card{ font-family: 'Roboto', sans-serif; border:none; margin-top: 10px; position: relative; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }.card.card-content { padding: 10px; background:#1A9AE1; color:white; }.card.card-content.card-title, .card-reveal.card-title{ font-size: 24px; font-weight: 200; }.card.card-reveal{ padding: 20px; position: absolute; background-color: #FFF; width: 100%; overflow-y: auto; /*top: 0;*/ left:0; bottom:0; height: 100%; z-index: 1; display: none; }.card.card-reveal p{ color: rgba(0, 0, 0, 0.71); margin:20px; }.btn-custom{ background-color: transparent; font-size:18px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link href="http://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" /> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="card"> <div class="card-image"> <div class="wrap"> <img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg"> </div><.-- card image --> </div> <div class="card-content bg-light text-dark"> <span class="card-title">Some Title</span> <button type="button" id="show" class="show btn btn-custom pull-right" aria-label="Left Align"> <i class="fa fa-ellipsis-v"></i> </button> </div><:-- card content --> <div class="card-reveal show1"> <span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div><.-- card reveal --> </div> </div> <div class="col-lg-6"> <div class="card"> <div class="card-image"> <div class="wrap"> <img class="img-fluid" src="https.//i.imgur.com/4UOcPM2.jpg"> </div><!-- card image --> </div> <div class="card-content bg-light text-dark"> <span class="card-title">Some Title</span> <button type="button" id="show2" class="show btn btn-custom pull-right" aria-label="Left Align"> <i class="fa fa-ellipsis-v"></i> </button> </div><!-- card content --> <div class="card-reveal show2"> <span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div><!-- card reveal --> </div> </div> </div> </div>

Answer 2

You can use element.next method for toggling next element.

There is a demo. hope it will helpful to you.

 $('.show').on('click',function(){ $(this).parent().next(".card-reveal").slideToggle('show'); }); $('.close').on('click',function(){ $(this).parent().slideToggle('show'); });

 @import url(http://fonts.googleapis.com/css?family=Roboto:400,300); @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); .card.card-image{ overflow: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }.card.card-image img{ -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }.card.card-image:hover img{ -webkit-transform: scale(1.2) rotate(-7deg); -moz-transform: scale(1.2) rotate(-7deg); -ms-transform: scale(1.2) rotate(-7deg); -o-transform: scale(1.2) rotate(-7deg); transform: scale(1.2) rotate(-7deg); }.card{ font-family: 'Roboto', sans-serif; border:none; margin-top: 10px; position: relative; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }.card.card-content { padding: 10px; background:#1A9AE1; color:white; }.card.card-content.card-title, .card-reveal.card-title{ font-size: 24px; font-weight: 200; }.card.card-reveal{ padding: 20px; position: absolute; background-color: #FFF; width: 100%; overflow-y: auto; /*top: 0;*/ left:0; bottom:0; height: 100%; z-index: 1; display: none; }.card.card-reveal p{ color: rgba(0, 0, 0, 0.71); margin:20px; }.btn-custom{ background-color: transparent; font-size:18px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="card"> <div class="card-image"> <div class="wrap"> <img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg"> </div><.-- card image --> </div> <div class="card-content bg-light text-dark"> <span class="card-title">Some Title</span> <button type="button" id="show" class="show btn btn-custom pull-right" aria-label="Left Align"> <i class="fa fa-ellipsis-v"></i> </button> </div><:-- card content --> <div class="card-reveal show1"> <span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div><.-- card reveal --> </div> </div> <div class="col-lg-6"> <div class="card"> <div class="card-image"> <div class="wrap"> <img class="img-fluid" src="https.//i.imgur.com/4UOcPM2.jpg"> </div><!-- card image --> </div> <div class="card-content bg-light text-dark"> <span class="card-title">Some Title</span> <button type="button" id="show2" class="show btn btn-custom pull-right" aria-label="Left Align"> <i class="fa fa-ellipsis-v"></i> </button> </div><!-- card content --> <div class="card-reveal show2"> <span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div><!-- card reveal --> </div> </div> </div> </div>

Answer 3

To make it more robust, you can assign an attribute to the clicked element and use that to target what you want to reveal.

To do this, I would use the class show1/show2 in your card-reveal divs as a target, and use the attribute data-target on the button, then use jQuery to match the data-target to the card-reveal .

Attributes in HTML5 can be called anything, but best practise is to use data-custom-name .

<button type="button" id="show1"... becomes <button type="button" id="show1" data-target="show1" (you don't really need the ID anymore).

Your jQuery code will then look for your target on click and toggle it.

I've also added a function for the close button, you can remove data-dismiss="modal" since that is a bootstrap attribute used for closing bootstrap modals and serves no purpose here.

I took most of this from your codepen link (had to remove the ][1] from your link)

 jQuery(document).ready(function($) { //you should have one of these in your code already $('.show').click(function(){ //same as on('click', function(){}); I just prefer this syntax var target = $(this).attr('data-target'); //this will be card1 if the first is clicked. $('.'+target).slideToggle('slow'); //add. for class selector and use the target variable to find the right element }); $('.close').click(function(){ //close button $(this).parent().slideToggle('slow'); //find the nearest parent and close it }); });

 @import url(http://fonts.googleapis.com/css?family=Roboto:400,300); @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); .card.card-image{ overflow: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }.card.card-image img{ -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }.card.card-image:hover img{ -webkit-transform: scale(1.2) rotate(-7deg); -moz-transform: scale(1.2) rotate(-7deg); -ms-transform: scale(1.2) rotate(-7deg); -o-transform: scale(1.2) rotate(-7deg); transform: scale(1.2) rotate(-7deg); }.card{ font-family: 'Roboto', sans-serif; border:none; margin-top: 10px; position: relative; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }.card.card-content { padding: 10px; background:#1A9AE1; color:white; }.card.card-content.card-title, .card-reveal.card-title{ font-size: 24px; font-weight: 200; }.card.card-reveal{ padding: 20px; position: absolute; background-color: #FFF; width: 100%; overflow-y: auto; /*top: 0;*/ left:0; bottom:0; height: 100%; z-index: 1; display: none; }.card.card-reveal p{ color: rgba(0, 0, 0, 0.71); margin:20px; }.btn-custom{ background-color: transparent; font-size:18px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="card"> <div class="card-image"> <div class="wrap"> <img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg"> </div><.-- card image --> </div> <div class="card-content bg-light text-dark"> <span class="card-title">Some Title</span> <button type="button" id="show" data-target="show1" class="show btn btn-custom pull-right" aria-label="Left Align"> <i class="fa fa-ellipsis-v"></i> </button> </div><:-- card content --> <div class="card-reveal show1"> <span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div><.-- card reveal --> </div> </div> <div class="col-lg-6"> <div class="card"> <div class="card-image"> <div class="wrap"> <img class="img-fluid" src="https.//i.imgur.com/4UOcPM2.jpg"> </div><!-- card image --> </div> <div class="card-content bg-light text-dark"> <span class="card-title">Some Title</span> <button type="button" id="show2" data-target="show2" class="show btn btn-custom pull-right" aria-label="Left Align"> <i class="fa fa-ellipsis-v"></i> </button> </div><!-- card content --> <div class="card-reveal show2"> <span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div><!-- card reveal --> </div> </div> </div> </div>