Pergunta sobre como corrigir WordPress WordPress: botão consumível não falha … solte!

Um usuário perguntou 👇

Olá, gostaria de adicionar um botão recolhível com os seguintes recursos ao meu site (localhost).Aqui você pode vê-lo em ação):

a largura do botão não precisa ser 100%, mas deve caber o texto dentro do botão botão pode ser inserido em uma linha de texto sem forçar as palavras após o botão passar para a próxima linha (tentei o drop-plugin ou – matic mas as palavras após o botão, mesmo que estejam escritas na mesma linha, são forçadas a ir para a próxima linha)

Eu estava procurando como criar o botão manualmente (sem plugins) e acabei na página w3schools onde criei o botão que quero (veja o link acima) usando o seguinte código

<!DOCTYPE html>
<html>
<head>
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  border: none;
}

.ccontent {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: .3s ease-out;
  background-color: #f1f1f1;
  box-shadow: 5px 5px 10px 3px inset rgba(0,0,0,0.60);
}
</style>
</head>
<body>

Does <button class="collapsible">this</button> works?
<div class="ccontent"><p>Yes!</p></div>
Good job!

<script type="text/javascript">
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

Então eu tentei descobrir como adicionar o código ao wordpress, então foi isso que eu fiz

.Collapsible e .content adicionaram o arquivo javascript style.css ao rodapé usando o plug-in

então em um post eu escrevi o seguinte código

Does <button class="collapsible">this</button> works?
<div class="ccontent"><p>Yes!</p></div>
Good job!

mas, embora o botão seja exibido corretamente, nada acontece quando é clicado. Como o botão está aparecendo, acho que o problema está relacionado ao código javascript.
SEO o que ele apontou no meu post como você pode ver é outro problema é o espaço em branco entre a primeira linha e a segunda linha.

Tenho certeza que o javascript está carregado porque quando abro o código fonte da página (CTRL + U) vejo o script exibido, uma linha antes da tag

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *