<style>
  .collapse .panel-body span img{float:left;margin:0 10px 10px 0;}
</style>
<h3>{{ heading_title }}</h3>
<div class="panel-group" id="accordion">
 
  {% if faqs < faq_limit %}  
   {% for faq in faqs %}
  <div class="panel panel-default">
    <div class="panel-heading">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{ faq.faq_id }}"><h4 class="panel-title">
        {{ faq.question }}</h4></a>
    </div>
    <div id="collapse{{ faq.faq_id }}" class="panel-collapse collapse">
      
      <div class="panel-body"><span><img src="{{ faq.image }}"></span>{{ faq.answer }}</div>
    </div>
  </div>
  {% endfor %}
 
  {% else %}
  {% for faq in faqs %}
<div class="panel panel-default">
    <div class="panel-heading">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{ faq.faq_id }}"><h4 class="panel-title">
        {{ faq.question }}</h4></a>
    </div>
    <div id="collapse{{ faq.faq_id }}" class="panel-collapse collapse">
      
      <div class="panel-body"><span><img src="{{ faq.image }}"></span>{{ faq.answer }}</div>
    </div>
  </div>
  {% endfor %}
  <div class="" style="text-align: center;margin-top: 5px;">
    <a href="{{faq_link}}"><button class="btn btn-primary"> {{ faq_page }} </button></a>
  </div>
  
{% endif %}
</div>
