Mudanças entre as edições de "Widget:Teste"

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
 
Linha 1: Linha 1:
<!-- Widget:Teste — CSS + JS do exemplo didático (colar na página Widget:Teste) -->
<style>
<style>
.teste-caixa {
    .teste-caixa {
    border: 1px solid #444;
        border: 1px solid #444;
    border-radius: 6px;
        border-radius: 6px;
    padding: 10px;
        padding: 10px;
    max-width: 36em;
        max-width: 36em;
    font-family: system-ui, sans-serif;
        font-family: system-ui, sans-serif;
}
    }
.teste-caixa h3 {
 
    margin: 0 0 8px;
    .teste-caixa h3 {
    font-size: 1.1em;
        margin: 0 0 8px;
}
        font-size: 1.1em;
.teste-caixa .teste-corpo {
    }
    margin: 0;
 
}
    .teste-caixa .teste-corpo {
.teste-caixa .teste-corpo.teste-colapsado {
        margin: 0;
    max-height: 3.2em;
    }
    overflow: hidden;
 
}
    .teste-caixa .teste-corpo.teste-colapsado {
.teste-caixa button.teste-toggle {
        max-height: 3.2em;
    margin-top: 8px;
        overflow: hidden;
    cursor: pointer;
    }
}
 
    .teste-caixa .teste-toggle {
        display: inline-block;
        margin-top: 8px;
        padding: 4px 10px;
        cursor: pointer;
        border: 1px solid #666;
        border-radius: 4px;
        background: #f0f0f0;
        font: inherit;
        user-select: none;
    }
 
    .teste-caixa .teste-toggle:hover {
        background: #e4e4e4;
    }
</style>
</style>
<script>
<script>
(function () {
    (function () {
    function init() {
        function init() {
        document.querySelectorAll('.teste-caixa').forEach(function (box) {
            document.querySelectorAll('.teste-caixa').forEach(function (box) {
            if (box.dataset.testeInit) return;
                if (box.dataset.testeInit) return;
            box.dataset.testeInit = '1';
                box.dataset.testeInit = '1';
            var body = box.querySelector('.teste-corpo');
                var body = box.querySelector('.teste-corpo');
            var btn = box.querySelector('.teste-toggle');
                var btn = box.querySelector('.teste-toggle');
            if (!body || !btn) return;
                if (!body || !btn) return;
            var aberto = false;
                var aberto = false;
            btn.addEventListener('click', function () {
                function toggle() {
                aberto = !aberto;
                    aberto = !aberto;
                body.classList.toggle('teste-colapsado', !aberto);
                    body.classList.toggle('teste-colapsado', !aberto);
                btn.textContent = aberto ? 'Recolher' : 'Expandir';
                    btn.textContent = aberto ? 'Recolher' : 'Expandir';
                }
                btn.addEventListener('click', toggle);
                btn.addEventListener('keydown', function (e) {
                    if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        toggle();
                    }
                });
             });
             });
         });
         }
    }
        if (document.readyState === 'loading') {
    if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', init);
        document.addEventListener('DOMContentLoaded', init);
        } else {
    } else {
            init();
        init();
        }
    }
    })();
})();
</script>
</script>

Edição atual tal como às 00h24min de 1 de abril de 2026

<style>

   .teste-caixa {
       border: 1px solid #444;
       border-radius: 6px;
       padding: 10px;
       max-width: 36em;
       font-family: system-ui, sans-serif;
   }
   .teste-caixa h3 {
       margin: 0 0 8px;
       font-size: 1.1em;
   }
   .teste-caixa .teste-corpo {
       margin: 0;
   }
   .teste-caixa .teste-corpo.teste-colapsado {
       max-height: 3.2em;
       overflow: hidden;
   }
   .teste-caixa .teste-toggle {
       display: inline-block;
       margin-top: 8px;
       padding: 4px 10px;
       cursor: pointer;
       border: 1px solid #666;
       border-radius: 4px;
       background: #f0f0f0;
       font: inherit;
       user-select: none;
   }
   .teste-caixa .teste-toggle:hover {
       background: #e4e4e4;
   }

</style> <script>

   (function () {
       function init() {
           document.querySelectorAll('.teste-caixa').forEach(function (box) {
               if (box.dataset.testeInit) return;
               box.dataset.testeInit = '1';
               var body = box.querySelector('.teste-corpo');
               var btn = box.querySelector('.teste-toggle');
               if (!body || !btn) return;
               var aberto = false;
               function toggle() {
                   aberto = !aberto;
                   body.classList.toggle('teste-colapsado', !aberto);
                   btn.textContent = aberto ? 'Recolher' : 'Expandir';
               }
               btn.addEventListener('click', toggle);
               btn.addEventListener('keydown', function (e) {
                   if (e.key === 'Enter' || e.key === ' ') {
                       e.preventDefault();
                       toggle();
                   }
               });
           });
       }
       if (document.readyState === 'loading') {
           document.addEventListener('DOMContentLoaded', init);
       } else {
           init();
       }
   })();

</script>