Expandindo uma <div> com JavaScript

[Frank K Hosaka]

Faz muito tempo que tenho pensado no meu projeto orçamento dentro de um celular.

O problema é que a tela do celular é bem pequena, mal dá para colocar duas colunas, no modo retrato.

No Galaxy Note 10, eu consegui <div class="w-[630px]"></div> no modo paisagem e é baseado nesse limite é que estou fazendo o meu projeto.

O problema é que não dá para exibir toda a informação numa só coluna, posso mostrar alguma coisa usando o CSS truncate do Tailwind.

Mas e se o usuário quiser ver tudo? Desde 2020 é que estou quebrando a cabeça, só hoje é que surgiu essa ideia:
 

<script src="https://cdn.tailwindcss.com"></script>
<script>
  function expandir() {
    const descricao = document.getElementById("descricao");
    descricao.classList.toggle("truncate");
  }
</script>
<?php $historico="Vamos ver se isso funciona"; ?>
<div class="w-[100px] m-0 m-auto">
    <div class="w-[100px] odd:bg-gray-200">Teste</div>
    <div id="descricao" class="w-[100px] truncate" onclick="expandir()"><?=$historico?></div>
    <div class="w-[100px] odd:bg-gray-200">Teste</div>
</div>

/ ==================== /

A ideia é péssima, coloquei o código JavaScript no config.php, e em outro código tentei invocar a função expandir. Não deu certo. O código só funciona se existir apenas um único <div> com o id="descricao". Isso é bem constrangedor, o Copilot corrigiu o código:

 

<script src="https://cdn.tailwindcss.com"></script>
<script>
  function expandir(element) {
    element.classList.toggle("truncate");
  }
</script>
<?php $historico="Vamos ver se isso funciona"; ?>
<div class="w-[100px] m-0 m-auto">
    <div class="w-[100px] odd:bg-gray-200">Teste</div>
    <div class="w-[100px] truncate" onclick="expandir(this)"><?=$historico?></div>
    <div class="w-[100px] odd:bg-gray-200">Teste</div>
</div>

 

Editado 1 hora atrás por Frank K Hosaka