Já tentei de várias formas diferentes, no meu site eu gostaria de criar um botão que exibisse algumas informações do site, porém não estou conseguindo e já vi no starck overflow, no youtube, etc e mesmo assim não encontro solução, vou mostrar em duas imagens o que quero fazer:
Clica no "i" e exibe as informações como na imagem abaixo.
Alguém me ajuda?
**HTML**
<div>
<button id="info-button">
<img src="img/info.png" class="home-main-info-1">
</button>
<div id="info-texto" >
Aqui você encontra informações contidas na versão PDF do currículo, alguns projetos com links para
acesso, contatos e download da versão PDF.
</div>
<hr id="info-texto">
</div>**JavaScript**
var infoButton = document.getElementById('home-main-info-1');
infoButton.addEventListener("click", function(){
var infoTexto = document.getElementsById('info-texto');
infoTexto.classList.toggle("hide");
})
Esse é o erro que dá
Oi, Renato
Tem uns pequenos erros:
Vê se está solução te atende?
<!-- HTML -->
<div>
<button id="info-button">
<img src="img/info.png" class="home-main-info-1">
</button>
<div id="info-texto" class="hide">
Aqui você encontra informações contidas na versão PDF do currículo, alguns projetos com links para
acesso, contatos e download da versão PDF.
</div>
</div>// Javascript
const infoButton = document.getElementById('info-button');
const infoTexto = document.getElementById('info-texto');
infoButton.addEventListener("click", function () {
infoTexto.classList.toggle("hide");
})/* CSS */
.hide {
display: none;
}Continuou dando erro de referência, vou tentar ver se acho de outra forma, talvez o problema esteja na forma como quero fazer. Obrigado pela ajuda. Se tiver alguma dica eu aceito kk