Parcelamento da Aula

<style>

/* IDs da tabela e botões ajustados para serem únicos */

#tabela-parcelamento-edi-semjuros-3x th {background-color: #ddd;color: black;}

#tabela-parcelamento-edi-semjuros-3x {margin-top: 20px; width: 100%; border-collapse: collapse;}

#tabela-parcelamento-edi-semjuros-3x th, #tabela-parcelamento-edi-semjuros-3x 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: -25px; 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() {

// ATENÇÃO: IDs dos elementos alterados aqui para serem únicos para este bloco

let tabela = document.getElementById("tabela-parcelamento-edi-semjuros-3x");

let botaoExpandir = document.getElementById("expand-button-semjuros-3x");

let botaoOcultar = document.getElementById("hide-button-semjuros-3x");

// Verifica se todos os elementos foram encontrados antes de tentar usá-los

if (tabela && botaoExpandir && botaoOcultar) {

// Inicializa a tabela como escondida ao carregar a página

tabela.style.display = "none";

// Garante que o botão de expandir esteja visível e o de ocultar escondido

botaoExpandir.style.display = "inline-block";

botaoOcultar.style.display = "none";

botaoExpandir.addEventListener("click", function() {

tabela.style.display = "table";

tabela.classList.add("fade-in");

botaoExpandir.style.display = "none";

botaoOcultar.style.display = "inline-block";

});

botaoOcultar.addEventListener("click", function() {

tabela.style.display = "none";

tabela.classList.remove("fade-in");

botaoOcultar.style.display = "none";

botaoExpandir.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-plus"></i> Mais opções de parcelamento</p></div>

<button id="expand-button-semjuros-3x" class="toggle-button">Parcelas <i class="fa fa-chevron-down"></i></button>

<button id="hide-button-semjuros-3x" class="toggle-button" style="display: none;">Ocultar <i class="fa fa-chevron-up"></i></button>

</div>

<table id="tabela-parcelamento-edi-semjuros-3x">

<thead><tr><th>Parcelas</th><th>Valor</th></tr></thead>

<tbody>

<tr><td class="vezes">1x <span class="juros">sem juros</span></td><td>{{ product.price | divided_by: 1 | money }}</td></tr>

<tr><td class="vezes">2x <span class="juros">sem juros</span></td><td>{{ product.price | divided_by: 2 | money }}</td></tr>

<tr><td class="vezes">3x <span class="juros">sem juros</span></td><td>{{ product.price | divided_by: 3 | money }}</td></tr>

<tr><td class="vezes">4x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 4 | times: 1.11 | money }}*</td></tr>

<tr><td class="vezes">5x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 5 | times: 1.123 | money }}*</td></tr>

<tr><td class="vezes">6x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 6 | times: 1.137 | money }}*</td></tr>

<tr> <td class="vezes">7x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 7 | times: 1.148 | money }}*</td></tr>

<tr><td class="vezes">8x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 8 | times: 1.162 | money }}*</td></tr>

<tr><td class="vezes">9x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 9 | times: 1.177 | money }}*</td></tr>

<tr><td class="vezes">10x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 10 | times: 1.187 | money }}*</td></tr>

<tr><td class="vezes">11x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 11 | times: 1.20 | money }}*</td></tr>

<tr><td class="vezes">12x <span class="juros">com juros</span></td><td>{{ product.price | divided_by: 12 | times: 1.216 | money }}*</td></tr>

</tbody>

</table>

</div>