hola.html

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  {% for p in site.data.report17[2017] %}
  <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" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          {{ p.partido }}
          <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="{{ p.percentage }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{ p.percentage }}%;"></div>
          </div>
          {{ p.percentage }}%
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        {% for c in p.categories %}
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">{{ c.category }}</h3>
          </div>
          <div class="panel-body">
            <div class="row">
              {% for q in c.questions %}
              <div class="col-md-10">
                <p>{{ q.question }} {{ q.text }}</p>
              </div>
              <div class="col-md-2">
                {% if q.value ==true %}
                    <img src="{{ site.baseurl }}/img/check.svg" class="ribbon">
                {% endif %}
                {% if q.value ==false %}
                    <img src="{{ site.baseurl }}/img/ribbon.svg" class="ribbon">
                {% endif %}
              </div>
              {% endfor %}
            </div>
          </div><!--panel body-->
        </div><!--panel default-->
        {% endfor %}
      </div>
    </div>
  </div>
  {% endfor %}
</div>