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