bootic: tabs product.html

<div id="tabs-products" class="hide-for-small-only"> <ul class="tabs" data-tabs id="product-tabs"> {% if product.product_type %} <li class="tabs-title tab-attributes {% if product.product_type %}is-active{% endif %}"> <a href="#panel1">Descripción Técnica</a> </li> {% endif %} <li class="tabs-title tab-shipping {% if product.product_type %}{% else %}is-active{% endif %}"> <a href="#panel2">Costo de Despacho</a> </li> {% if product.product_type and product.attributes.videos.has_value %} <li class="tabs-title tab-videos"> <a href="#panel3">Videos</a> </li> {% endif %} <li class="tabs-title tab-comments"> <a href="#panel4">Comentarios</a> </li> </ul> <div class="tabs-content" data-tabs-content="product-tabs"> {% if product.product_type %} <div class="tabs-panel content cont-attributes {% if product.product_type %}is-active{% endif %}" id="panel1"> <ul class="product-attributes"> {% for field in product.attributes %} <li class="attribute-{{field.key}}"> {{ field.value | format_text }} </li> {% endfor %} </ul> </div> {% endif %} <div class="tabs-panel content cont-shipping {% if product.product_type %}{% else %}is-active{% endif %}" id="panel2"> {{ pages.tabla-costos-despacho.body }} </div> {% if product.product_type and product.attributes.videos.has_value %} <div class="tabs-panel content cont-videos" id="panel3"> <div>{{ product.attributes.videos.value }}</div> </div> {% endif %} <div class="tabs-panel content cont-comments" id="panel4"> <div class="fb-comments" data-href="{{ product.url }}" data-numposts="10" data-colorscheme="light" data-width="980px"></div> </div> </div> </div> <ul class="accordion show-for-small-only" data-accordion data-multi-expand="true" role="tablist"> {% if product.product_type %} <li class="accordion-item accordion-attributes {% if product.product_type %}is-active{% endif %}"> <a href="#panel1" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Ficha Técnica</a> <div id="panel1" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading"> <ul class="product-attributes"> {% for field in product.attributes %} <li class="attribute-{{field.key}}"> {{ field.value }} </li> {% endfor %} </ul> </div> </li> {% endif %} <li class="accordion-item accordion-shipping {% if product.product_type %}{% else %}is-active{% endif %}"> <a href="#panel2" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Costos de Despacho</a> <div id="panel2" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading"> <div> {{ pages.tabla-costos-despacho.body }}</div> </div> </li> {% if product.product_type and product.attributes.videos.has_value %} <li class="accordion-item accordion-videos"> <a href="#panel3" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Videos</a> <div id="panel3" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading"> <div>{{ product.attributes.videos.value }}</div> </div> </li> {% endif %} <li class="accordion-item accordion-comments"> <a href="#panel4" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Comentarios</a> <div id="panel4" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading"> <div class="fb-comments" data-href="{{ product.url }}" data-numposts="10" data-colorscheme="light" data-width="980px"></div> </div> </li> </ul>