SMOOTH FAQ javascript

		.single_faq {
			margin-bottom: 5px;
		}
		.faq_question {
			background-color: #D0D0D0;
			color: #ffffff; 
			padding: 15px 25px;
			font-family: 'Roboto', sans-serif;
			font-weight: 500;
			font-size: 22px;
			cursor: pointer;
		}
		.faq_answer {
			padding: 25px;
			background-color: #F0F0F0;
			font-weight: 300;
			font-size: 18px;
			line-height: 1.2em;
		}
		.blue {
			font-weight: bold;
		}
		.faq_answer {
			display: none;
		}
		.faq_on .faq_answer {
			display: block;
		}
		.faq_answer_wrap {
			max-height: 0px;
		    transition: all .5s ease;
		    overflow: hidden;
		}
		.triangle_svg {
			position: absolute;
			top: 15px;
			right: 20px;
			transform: rotate(180deg);
		}
		.triangle_svg {
			width: 16px;
		}
		.single_faq.faq_on .triangle_svg {
			transform: rotate(0deg);
		}

$html .= "<div class='single_faq'>";

$html .= "  <div class='faq_question faq_on_off' data-what='parent' data-what-class='faq_on' >Q: {$post_title}";
$html .= "  <svg class='triangle_svg' xmlns='http://www.w3.org/2000/svg' width='26' height='23' viewBox='0 0 26 23'><path class='triangle' data-name='Polygon 9' d='M13,0,26,23H0Z' transform='translate(26 23) rotate(180)' fill='#fff'/></svg></div>";

$html .= "	<div class='faq_answer_wrap'>";
$html .= "	    <div class='faq_answer'><span class='blue'>A:</span> {$this_post_content}</div>";
$html .= "	</div>";	

$html .= "</div>";

    <script>
        jQuery(document).ready(function($) {	
	        
	        
	        
		    $('body').on('click', '.faq_on_off', function(event) {
			  

			  var what        = $(this).attr("data-what");
			  if (what == "parent") { what =  $(this).parent(); }
			  if (what == "this")   { what =  $(this); }
			  var what_class           = $(this).attr("data-what-class");
			  var what_class_off       = $(this).attr("data-what-class-off");
			  var remove_whos_classes  = $(this).attr("data-remove-whos-classes");
			  var remove_from_what     = $(this).attr("data-remove-from-what");
			  var has_class       = false;
			  if ($(what).hasClass( what_class )) { has_class   = true; }
		      if (what_class_off != "undefined") { $( what_class_off ).removeClass( what_class ); }
		      
		      if (remove_whos_classes != "undefined") {
					$( remove_whos_classes ).each(function() {
					  var remove_class  = $(this).attr("data-what-class");
					  $(remove_from_what).removeClass(remove_class);
					});
		      }	
		      
		        
		      $('.single_faq').removeClass('last_clicked');
		      $(this).parent().addClass('last_clicked');
		      
			  
			  if (has_class == false) {				  
			      $(what).addClass(what_class);		
			      var height = $( ".faq_answer_wrap .faq_answer", what ).outerHeight();
			      $( ".faq_answer_wrap", what ).css( "max-height", height+"px" );	      
			  }else{
				  $( ".faq_answer_wrap", what ).css( "max-height", "0px" );
			      setTimeout(function(){ $(what).removeClass(what_class); }, 500);			      
			  }
			  

			  $( ".single_faq" ).each(function( index ) {
				  if(!$(this).hasClass( 'last_clicked' )) { 
					  $( ".faq_answer_wrap", this ).css( "max-height", "0px" );
					  var that = this;
					  setTimeout(function(){ $(that).removeClass('faq_on'); }, 500);
			      }
			  });
			}); 
		});		
    </script>