Tabela de Parcelamento com Juros – Mercado Pago

Script

<!-- INICIO - TABELA DE PARCELAMENTO COM JUROS H2B --> 
<style>
#tabela-parcelamento-h2b th {background-color: #ddd;color: black;}
#tabela-parcelamento-h2b {margin-top: 20px; width: 100%; border-collapse: collapse;}
#tabela-parcelamento-h2b th, #tabela-parcelamento-h2b td {border: 1px solid #ddd; padding: 8px; text-align: left; padding-top: 2px; padding-bottom: 2px;}
.juros {font-size: small; font-weight: 100;}
.vezes {font-weight: 900;}
.parcelamento {font-size:16px;}
.toggle-button {background-color: rgba(0, 0, 0, 0); color: black; border: none;  cursor: pointer;}
.tabela {display: flex; justify-content: space-between; align-items: center; margin-top: -35px; margin-bottom: -20px;}
@keyframes fade-in {from {opacity: 0;} to {opacity: 1;}}
.fade-in {animation: fade-in 0.5s ease-in-out;}
</style>

<script>
document.addEventListener("DOMContentLoaded",function(){let e=document.getElementById("tabela-parcelamento-h2b"),n=document.getElementById("expand-button"),t=document.getElementById("hide-button");n.addEventListener("click",function(){e.style.display="table",e.classList.add("fade-in"),n.style.display="none",t.style.display="inline-block"}),t.addEventListener("click",function(){e.style.display="none",e.classList.remove("fade-in"),t.style.display="none",n.style.display="inline-block"})});
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           
<div>
  <div class="tabela">
    <div><p class="parcelamento"><i class="fa fa-credit-card"></i> Em até 12x de <span style="font-size:20px; color: black;"><b>{{ product.price |times: 1.216 | divided_by: 12 | money }}</b></span></p></div>
    <button id="expand-button" class="toggle-button">Parcelas <i class="fa fa-chevron-down"></i></button>
    <button id="hide-button" class="toggle-button" style="display: none;">Ocultar <i class="fa fa-chevron-up"></i></button>
  </div>
  <table id="tabela-parcelamento-h2b" class="fade-in" style="display: none;">
    <thead><tr><th>Parcelas</th><th>Valor</th></tr></thead>
    <tbody>
    <!-- 1º Parcela --> 
        <tr><td class="vezes">1x <span class="juros">sem juros</span></td><td>{{ product.price | divided_by: 1 | money }}</td></tr>
    <!-- 1º Parcela --> 
    <!-- 2º Parcela -->  
        <tr><td class="vezes">2x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 2 | times: 1.0764 | money }}*</td></tr>
    <!-- 2º Parcela -->  
    <!-- 3º Parcela -->  
        <tr><td class="vezes">3x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 3 | times: 1.0925 | money }}*</td></tr>
    <!-- 3º Parcela -->  
    <!-- 4º Parcela -->  
        <tr><td class="vezes">4x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 4 | times: 1.11 | money }}*</td></tr>
    <!-- 4º Parcela -->  
    <!-- 5º Parcela -->  
        <tr><td class="vezes">5x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 5 | times: 1.123 | money }}*</td></tr>
    <!-- 5º Parcela -->  
    <!-- 6º Parcela -->  
        <tr><td class="vezes">6x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 6 | times: 1.137 | money }}*</td></tr>
    <!-- 6º Parcela -->  
    <!-- 7º Parcela -->  
        <tr> <td class="vezes">7x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 7 | times: 1.148 | money }}*</td></tr>
    <!-- 7º Parcela --> 
    <!-- 8º Parcela -->  
        <tr><td class="vezes">8x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 8 | times: 1.162 | money }}*</td></tr>
    <!-- 8º Parcela -->  
    <!-- 9º Parcela -->  
        <tr><td class="vezes">9x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 9 | times: 1.177 | money }}*</td></tr>
    <!-- 9º Parcela -->  
    <!-- 10º Parcela -->  
        <tr><td class="vezes">10x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 10 | times: 1.187 | money }}*</td></tr>
    <!-- 10º Parcela -->
    <!-- 11º Parcela -->  
        <tr><td class="vezes">11x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 11 | times: 1.20 | money }}*</td></tr>
    <!-- 11º Parcela -->  
    <!-- 12º Parcela -->  
        <tr><td class="vezes">12x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 12 | times: 1.216 | money }}*</td></tr>
    <!-- 12º Parcela -->      
    </tbody>
  </table>
</div>   
<!-- FIM - TABELA DE PARCELAMENTO COM JUROS H2B -->