Início / coding / Perguntas / 79569421
Accepted
C3ISR - Everything Cybersecuri
Asked: 2025-04-12 01:23:47 +0800 CST

Como animar a exibição da tabela: nenhum / bloco? [duplicado]

  • 772

CodePen: https://codepen.io/C3ISR-Everything-Cybersecurity/pen/azbeOEK

o que estou tentando fazer é ter um pouco de animação ou transição revelada quando o usuário clica no acordeão para exibir a tabela, código completo abaixo HTML CSS JS, quero animar a transição de abertura e fechamento das tabelas no acordeão.

Código completo:

HTML:

            var acc = document.getElementsByClassName("accordion");
            var i;

            for (i = 0; i < acc.length; i++) {
                acc[i].addEventListener("click", function() {
                    this.classList.toggle("active");
                    var panel = this.nextElementSibling;
                    if (panel.style.display === "block") {
                        panel.style.display = "none";
                    } else {
                        panel.style.display = "block";
                    }
                });
            }
       body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: White;
            font-family: Sakkal Majalla;
            direction: rtl;
            position: relative;
            z-index: -2;
            -ms-overflow-style: none;
            
        }
        body::-webkit-scrollbar, body::-webkit-scrollbar-button { display: none; } /* Chrome */


        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .main{    
            display: grid;
            grid-template-columns: 1fr;
            justify-items: center;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }

        table {
            border: 1px solid #dededf;  
            table-layout: fixed;
            border-collapse: collapse;
            border-spacing: 1px;
            text-align: center;
        }

        th {
            border: 1px solid #dededf;
            background-color: #eceff1;
            color: #000000;
            padding: 5px;
        }

        td {
            border: 1px solid #dededf;
            background-color: #ffffff;
            color: #000000;
            padding: 5px;  
        }
        th:nth-child(1) {  
            width: 30.9rem;
        }

        th:nth-child(2) {  
            width: 10rem;
        }
        th:nth-child(3) {  
            width: 7rem;
        }

        .accordion {
            background-color: #ffffff;
            color: black;
            font-weight: bold;
            cursor: pointer;
            margin-top: 20px;
            padding: 18px;
            border: none;
            text-align: right;
            outline: none;
            font-size: 20px;
            transition: 0.4s;
            width: 50rem;
            border: 1px solid rgb(219, 219, 219);
            border-radius: 8px;
            box-shadow: rgba(100, 100, 111, 0.123) 0px 7px 29px 0px;
        }

        .active, .accordion:hover {
            border-radius: 8px 8px 0px 0px;
            border-color:  rgb(0, 128, 255);
        }

        .accordion span{
            float: left;
            font-size: 15px;
            color: #116ce4;
        }

        .panel {
            display: none;
            overflow: hidden;  
        }
   <div class="main">
            <button class="accordion">
                John Doe
            </button>
            <div class="panel">
                <table>
                    <th>company</th>
                    <th>department</th>
                    <th>2025?</th>
                    <tr>
                        <td>COMPANY A</td>
                        <td>FINANCE</td>
                        <td>&#9989;</td>
                    </tr>
                    <tr>
                        <td>COMPANY Z</td>
                        <td>PMO</td>
                        <td>&#10060;</td>
                    </tr>
                </table>
            </div>
                 <button class="accordion">
                John Doe
            </button>
            <div class="panel">
                <table>
                    <th>company</th>
                    <th>department</th>
                    <th>2025?</th>
                    <tr>
                         <td>company A</td>
                        <td>HR</td>
                        <td>&#10060;</td>
                    </tr>
                    <tr>
                       <td>company B</td>
                        <td>HR</td>
                        <td>&#10060;</td>
                    </tr>
                    <tr>
                          <td>company C</td>
                        <td>HR</td>
                        <td>&#10060;</td>
                    </tr>
                </table>
            </div>
                 <button class="accordion">
                John Doe
            </button>
            <div class="panel">
                <table>
                    <th>company</th>
                    <th>department</th>
                     <th>2025?</th>
                    <tr>
                        <td>company A</td>
                        <td>HR</td>
                        <td>&#9989;</td>
                    </tr>
                </table>
            </div>       
    </div>

javascript

2 respostas

  1. Best Answer

    Altura máxima do CSS:

    .panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 18px;
}

.panel.open {
    max-height: 1000px;
    padding: 18px;
}

    Classe de alternância Javascript ".open":

    <script>
    var acc = document.getElementsByClassName("accordion");

    for (let i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function () {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            panel.classList.toggle("open");
        });
    }
</script>
    • 0

  2. Ao clicar no acordeão, a classe ativa é alternada no botão, alterando sua aparência e girando a seta, então o js verificará a altura máxima do próximo painel.

    Se fechado (max-height is 0 or initially null): a altura máxima é definida como scrollHeight, e a transição CSS anima suavemente o painel de uma altura de 0 até a altura da tabela.

    Se aberto (max-height has a value): a altura máxima é definida como null, e a transição CSS anima suavemente o painel de sua altura atual de volta a 0.

    var acc = document.getElementsByClassName("accordion")
var i
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function () {
    this.classList.toggle("active")
    var panel = this.nextElementSibling
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px"
    }
  })
}
    body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: White;
            font-family: Sakkal Majalla;
            direction: rtl;
            position: relative;
            z-index: -2;
            -ms-overflow-style: none;
        }
        body::-webkit-scrollbar, body::-webkit-scrollbar-button { display: none; } /* Chrome */

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .main{
            display: grid;
            grid-template-columns: 1fr;
            justify-items: center;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }

        table {
            border: 1px solid #dededf;
            table-layout: fixed;
            border-collapse: collapse;
            border-spacing: 1px;
            text-align: center;
            width: 100%;
        }

        th {
            border: 1px solid #dededf;
            background-color: #eceff1;
            color: #000000;
            padding: 5px;
        }

        td {
            border: 1px solid #dededf;
            background-color: #ffffff;
            color: #000000;
            padding: 5px;
        }
        th:nth-child(1) {
            width: 30.9rem;
        }

        th:nth-child(2) {
            width: 10rem;
        }
        th:nth-child(3) {
            width: 7rem;
        }

        .accordion {
            background-color: #ffffff;
            color: black;
            font-weight: bold;
            cursor: pointer;
            margin-top: 20px;
            padding: 18px;
            border: none;
            text-align: right;
            outline: none;
            font-size: 20px;
            transition: 0.4s;
            width: 50rem;
            border: 1px solid rgb(219, 219, 219);
            border-radius: 8px;
            box-shadow: rgba(100, 100, 111, 0.123) 0px 7px 29px 0px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .active, .accordion:hover {
            border-radius: 8px 8px 0px 0px;
            border-color:  rgb(0, 128, 255);
        }

        .accordion span{
            float: left;
            font-size: 15px;
            color: #116ce4;
        }

        .panel {
            overflow: hidden;
            width: 50rem;
            border-left: 1px solid rgb(219, 219, 219);
            border-right: 1px solid rgb(219, 219, 219);
            border-bottom: 1px solid rgb(219, 219, 219);
            border-radius: 0px 0px 8px 8px;
            box-shadow: rgba(100, 100, 111, 0.123) 0px 7px 29px 0px;
            margin-top: -1px;
            transition: max-height 0.3s ease-in-out; /* This is the transition for the animation */
            max-height: 0;
        }

        .panel > table {
            margin: 10px;
        }

        /*I addes a plus sign that will also animate when ypu click on the accordion, feel free to change or remove it*/
        .accordion::after {
            content: '\002B';
            font-size: 20px;
            color: #777;
            float: left;
            margin-left: 10px;
            transition: transform 0.3s ease-in-out;
        }

        .accordion.active::after {
            content: '\2212';
            transform: rotate(45deg);
        }
    <div class="main">
  <button class="accordion">John Doe</button>
  <div class="panel">
    <table>
      <th>company</th>
      <th>department</th>
      <th>2025?</th>
      <tr>
        <td>COMPANY A</td>
        <td>FINANCE</td>
        <td>&#9989;</td>
      </tr>
      <tr>
        <td>COMPANY Z</td>
        <td>PMO</td>
        <td>&#10060;</td>
      </tr>
    </table>
  </div>
  <button class="accordion">John Doe</button>
  <div class="panel">
    <table>
      <th>company</th>
      <th>department</th>
      <th>2025?</th>
      <tr>
        <td>company A</td>
        <td>HR</td>
        <td>&#10060;</td>
      </tr>
      <tr>
        <td>company B</td>
        <td>HR</td>
        <td>&#10060;</td>
      </tr>
      <tr>
        <td>company C</td>
        <td>HR</td>
        <td>&#10060;</td>
      </tr>
    </table>
  </div>
  <button class="accordion">John Doe</button>
  <div class="panel">
    <table>
      <th>company</th>
      <th>department</th>
      <th>2025?</th>
      <tr>
        <td>company A</td>
        <td>HR</td>
        <td>&#9989;</td>
      </tr>
    </table>
  </div>
</div>

    • 0

relate perguntas