Selecting multiple data attributes using jquery click() function

Question

<script>
 jQuery(document).ready(function ($){
  function toggleChevron(e) {
   $(e.target)
    .prev('.panel-heading')
    .find("i")
    .toggleClass('fa-plus fa-minus');      
   
   }
   
   $('#accordion').on('hidden.bs.collapse', toggleChevron);
   $('#accordion').on('shown.bs.collapse', toggleChevron);      

  });     
</script> 

<div class="col-md-8 hidden-xs">      
 <div id="carousel">
   <a href="#"><img src="<?php echo IMAGES. '/home-1.jpg' ?>" id="item-1" /></a>
   <a href="#"><img src="<?php echo IMAGES. '/home-2.jpg' ?>" id="item-2" /></a>
   <a href="#"><img src="<?php echo IMAGES. '/home-3.jpg' ?>" id="item-3" /></a>                            
 </div>      
</div>

<div class="col-md-4 rooms-description"> 
 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
   <div class="panel panel-default">
  <div class="panel-heading" role="tab" id="headingOne">
    <h4 class="panel-title">          
   <a role="button" data-toggle="collapse" data-parent="#accordion" data-item="item-1" href="#roomsOne" aria-expanded="true" aria-controls="roomsOne">
     <?php printf( esc_html__('Standard Studio', 'la-vida-suite')); ?>
   </a>
   <i class="fa fa-minus pull-right"></i>
    </h4>
  </div>
  <div id="roomsOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
    <div class="panel-body">
   <p><?php printf( esc_html__('Extremely Spacious and comfortable for couples', 'la-vida-suite')); ?></p>
   <p><?php printf( esc_html__('Located on the eighth floor,', 'la-vida-suite')); ?></p>
   <p><?php printf( esc_html__('King or Twin Bed', 'la-vida-suite')); ?></p>
   <p><?php printf( esc_html__('Some rooms are connected (by request)', 'la-vida-suite')); ?></p>
   <p><?php printf( esc_html__('Room Size is 30 m²', 'la-vida-suite')); ?></p>
    </div><!-- panel-body-->
  </div>
   </div><!-- panel-default-->
   <div class="panel panel-default">
  <div class="panel-heading" role="tab" id="headingTwo">
    <h4 class="panel-title">
   <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" data-item="item-2" href="#roomsTwo" aria-expanded="false" aria-controls="roomsTwo">
     <?php printf( esc_html__('Executive Studio', 'la-vida-suite')); ?>
   </a>
   <i class="fa fa-plus pull-right"></i>
    </h4>
  </div>
  <div id="roomsTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
    <div class="panel-body">
   <p><?php printf( esc_html__('Extremely Spacious and comfortable for couples', 'la-vida-suite')); ?></p>
   <p><?php printf( esc_html__('Located on the ninth floor,', 'la-vida-suite')); ?></p>
   <p><?php printf( esc_html__('King or Twin Bed', 'la-vida-suite')); ?></p>
   <p><?php printf( esc_html__('Some rooms are connected (by request)', 'la-vida-suite')); ?></p>
   <p><?php printf( esc_html__('Room Size is 30 m²', 'la-vida-suite')); ?></p>  
    </div><!-- panel-body-->
  </div>
   </div><!-- panel-default-->
   <div class="panel panel-default">
  <div class="panel-heading" role="tab" id="headingThree">
    <h4 class="panel-title">
   <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" data-item="item-3" href="#roomsThree" aria-expanded="false" aria-controls="roomsThree">
     <?php printf( esc_html__('Deluxe 1 Bedroom', 'la-vida-suite')); ?>
   </a>
   <i class="fa fa-plus pull-right"></i>
    </h4>
  </div>
  <div id="roomsThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
    <div class="panel-body">
   <p><?php printf( esc_html__('For More Than One couple or a family', 'la-vida-suite')); ?></p>
   <p><?php printf( esc_html__('Located on the lower floors', 'la-vida-suite')); ?></p>
   <p><?php printf( esc_html__('King or Twin Bed', 'la-vida-suite')); ?></p>               
   <p><?php printf( esc_html__('Apartment size is 55 m²', 'la-vida-suite')); ?></p>
    </div>
  </div><!-- panel-body-->
   </div><!-- panel-default-->  
 </div><!-- panel-group-->
</div><!--col-md-4-->

I have taken two columns: col-md-8 and col-md-4. In col-md-4, there is an accordion having data-items item-1, item-2 and item-3. In col-md-8, there are 3 images in a carousel. I want a result like this. If one panel of accordion is active, it should display, the corresponding image in carousel. For example, if data-item=2 is active, then the carousel having image id="item-2" should be come up. I have also included a script where I have given a toggle option of (+,-) in the accordion. How should i write the code in the script so that I would get the desired result? I need help.

Answer 1

Append all your common elements a common class. e.g.

class="collapsed myCommonElement"

then you can use the

$(.myCommonElement")

class selector to assign the click to all elements with that class.

Also note you should adopt the $(.myCommonElement").on("click", function(){..} pattern if you can as it is better than the

$("").click()

approach for a number of reasons..