jcadima
4/26/2017 - 9:18 PM

Working Accordion with custom images

Working Accordion with custom images


https://api.jquery.com/find/

<ul class="faq">
   <li class="q">
      <div class="col-md-2">
         <img src="http://popbetaserver.com/projects/tropicfleet/wp-content/uploads/2017/04/card.png">
      </div>
      <div class="col-md-8">
         Allocation by Product
      </div>
      <div class="col-md-2">
         <img class="indicator" src="http://popbetaserver.com/projects/tropicfleet/wp-content/uploads/2017/04/indicator.png">
      </div>
   </li>
   <li class="a">Suspendisse sit amet elit lacinia, feugiat magna at, luctus massa. Aliquam sodales dictum nulla. consectetur adipiscing elit.</li>
   <li class="q">
      <div class="col-md-2">
         <img src="http://popbetaserver.com/projects/tropicfleet/wp-content/uploads/2017/04/card_cart.png">
      </div>
      <div class="col-md-8">
         Allocation by Total Purchase
      </div>
      <div class="col-md-2">
         <img class="indicator" src="http://popbetaserver.com/projects/tropicfleet/wp-content/uploads/2017/04/indicator.png"> 
      </div>
   </li>
   <li class="a">Suspendisse sit amet elit lacinia, feugiat magna at, luctus massa. Aliquam sodales dictum nulla. consectetur adipiscing elit.</li>
   <li class="q">
      <div class="col-md-2">
         <img src="http://popbetaserver.com/projects/tropicfleet/wp-content/uploads/2017/04/card_money.png">
      </div>
      <div class="col-md-8"> 
         Dollar Restriction
      </div>
      <div class="col-md-2">
         <img class="indicator" src="http://popbetaserver.com/projects/tropicfleet/wp-content/uploads/2017/04/indicator.png">
      </div>
   </li>
   <li class="a">Suspendisse sit amet elit lacinia, feugiat magna at, luctus massa. Aliquam sodales dictum nulla. consectetur adipiscing elit.</li>
   <li class="q">
      <div class="col-md-2">
         <img src="http://popbetaserver.com/projects/tropicfleet/wp-content/uploads/2017/04/card_time.png">
      </div>
      <div class="col-md-8">
         Date &amp; Time Activation Control
      </div>
      <div class="col-md-2">
         <img class="indicator" src="http://popbetaserver.com/projects/tropicfleet/wp-content/uploads/2017/04/indicator.png">
      </div>
   </li>
   <li class="a">Suspendisse sit amet elit lacinia, feugiat magna at, luctus massa. Aliquam sodales dictum nulla. consectetur adipiscing elit.</li>
   <li class="q">
      <div class="col-md-2">
         <img src="http://popbetaserver.com/projects/tropicfleet/wp-content/uploads/2017/04/card_pin.png">
      </div>
      <div class="col-md-8">
         Customized 4-digit PIN Numbers
      </div>
      <div class="col-md-2">
         <img class="indicator" src="http://popbetaserver.com/projects/tropicfleet/wp-content/uploads/2017/04/indicator.png"> 
      </div>
   </li>
   <li class="a">Suspendisse sit amet elit lacinia, feugiat magna at, luctus massa. Aliquam sodales dictum nulla. consectetur adipiscing elit.</li>
</ul>


<script>
  
var action = 'click';
var speed = "fast";


//Document.Ready
jQuery(document).ready(function(){
	  //Question handler
	jQuery('li.q').on(action, function(){
	     //gets next element
	     //opens .a of selected question
		jQuery(this).next().slideToggle(speed)
		    //selects all other answers and slides up any open answer
		    .siblings('li.a').slideUp();
		  
		  //Grab img from clicked question
		// var img = jQuery(this).children('img');
		var img = jQuery(this).find('.col-md-2 img.indicator') ;
		
		  //Remove Rotate class from all images except the active
		jQuery('.indicator img').not(img).removeClass('rotate');
		//toggle rotate class
		img.toggleClass('rotate');
	
	});//End on click
	

});//End Ready
  
  
    
  
</script>