3 different images with 3 buttons to open each one a different text. Only the first button works and the second and third texts when the first button is pressed move with the movement of the first text. I've looked everywhere and can not find the solution.
Can someone help me?
var content = document.getElementById("content");
var button = document.getElementById("show-more");
button.onclick = function() {
if (content.className == "open") {
content.className = "";
button.innerHTML = "Ler Mais";
} else {
content.className = "open";
button.innerHTML = "Fechar";
}
};#content {
width: 280px;
background: #fff;
padding: 20px;
padding-top: 15px;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
background-color: whitesmoke;
margin-left: 100px;
max-height: 8px;
overflow: hidden;
transition: max-height 0.7s;
}
#content.open {
width: 280px;
max-height: 500px;
transition: max-height 0.7s;
}
#show-more {
display: inline-block;
text-decoration: none;
padding: 10px 10px;
font-size: 12px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
margin-left: 210px;
margin-top: 2px;
cursor: pointer;
}<div id="content">O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. espécime de livro. Este texto não só sobreviveu 5 séculos.</div>
<div id="cont1">O Lorem programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum</div>
<div class="mark">Depois de ter o site
<div class="mark">Depois de ter o O Lorem Ipsum é um texto modelo da indústria tipográfica e de.
</div>
<a id="show-more">Show more</a>
<a id="show.more1">Show more</a>
</div>