Eu tenho uma função que esconde uma parte do texto, e caso a pessoa clique em "leia mais", o resto do texto é exibido.
No entanto, eu não estou conseguindo remover a classe que esconde a parte do texto. Vi que o código estava correto, pois testei ele no console, mas ele não funciona dentro do meu event listener.
Código:
document.addEventListener("DOMContentLoaded", function() {
var fullText = document.getElementById('full-text')
var container = document.getElementById('container')
var gradient = document.getElementsByClassName('gradient')
var seeMore = document.getElementsByClassName('see-more-btn')
var heightBox = fullText.offsetHeight
if (heightBox > 150) {
fullText.classList.add('is--short-text')
fullText.innerHTML += '<div class="gradient"></div>'
container.innerHTML += '<span class="see-more-btn">See more</span>'
seeMore[0].addEventListener('click', function() {
fullText.classList.remove('is--short-text')
hide(gradient[0])
hide(seeMore[0])
}, false)
}
})
function hide(elem) {
elem.style.display = 'none'
}
body {
background: #f0f0f0;
}
.container {
padding: 15px;
max-width: 760px;
background: #fff
}
#full-text {
position: relative;
height: auto;
overflow: hidden;
}
.is--short-text {
height: 150px !important;
}
.see-more-btn {
display: block;
width: 150px;
margin: 20px auto 0;
padding: 5px 20px;
border-radius: 5px;
background: #f0f0f0;
text-align: center;
color: #777;
cursor: pointer;
}
.gradient {
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
background: linear-gradient(to bottom, transparent, #fff);
}
<div class="container mt-5 bg-white" id="container">
<h1 class="h1 text-center">Lorem ipsum</h1>
<div id="full-text">
<p>Frankfurter shank salami turkey jerky, porchetta boudin cow. Bacon drumstick beef ribs, tongue pork loin chicken ball tip fatback shank. Meatloaf landjaeger tongue, cupim capicola leberkas kevin porchetta bresaola. Prosciutto pork beef ribs salami. Cupim shoulder corned beef, beef ribs ball tip pastrami tongue brisket salami venison beef turkey chicken jowl pork loin. Jerky pork chop cupim meatloaf capicola salami. Pork loin pig buffalo hamburger, tri-tip prosciutto beef ribs ground round shoulder meatloaf bresaola pork chop filet mignon.</p>
<p>Burgdoggen leberkas pork chop shankle ribeye. T-bone ribeye strip steak pig, meatball pork belly flank turducken spare ribs. Burgdoggen porchetta ground round doner spare ribs ham hock. Capicola pancetta fatback alcatra corned beef filet mignon.</p>
<p>Turkey bresaola short loin, ribeye shank t-bone chicken fatback shankle rump. Tenderloin salami bresaola chuck andouille ham hock. Flank corned beef filet mignon drumstick short ribs salami turkey spare ribs doner strip steak biltong. Picanha short loin pancetta tongue meatball porchetta brisket capicola pastrami pork chop. Shank flank picanha pork loin alcatra kevin pork shankle. Burgdoggen hamburger pastrami, rump bresaola kielbasa pork beef shoulder drumstick salami ribeye cupim chicken.</p>
</div>
</div>
Por que será que o classList.remove()
não funciona?