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

CoreyB
November 26, 2019
261 views
2 votes
3 Answers

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>

Answers

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>

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.