Добрый день. Есть код на js, который сворачивает/разворачивает текст статей. Как сделать так, чтобы текст при первой загрузке страницы был уже свернут (по умолчанию)? И еще, как сделать так, чтобы класс folded добавлялся не кнопке, по которой кликнули, а родителю всего поста? Заранее спасибо.
js:
var foldBtns = document.getElementsByClassName("fold-button");
for (var i = 0; i < foldBtns.length; i++) {
foldBtns[i].addEventListener("click", function(e) {
if (e.target.className == "fold-button folded") {
e.target.innerHTML = "свернуть";
e.target.className = "fold-button";
var displayState = "block";
} else {
e.target.innerHTML = "развернуть";
e.target.className = "fold-button folded";
var displayState = "none";
}
event.target
.parentElement
.getElementsByClassName('article-author')[0]
.style.display = displayState;
event.target
.parentElement
.getElementsByClassName('article-created-date')[0]
.style.display = displayState;
event.target
.parentElement
.getElementsByClassName('article-text')[0]
.style.display = displayState;
});
foldBtns[i].addEventListener("click", function(event) {
console.log("you clicked ", event.target);
});
}
<div class="archive">
{% for post in posts %}
<div class="one-post">
<h2 class="post-title"><a href="http://127.0.0.1:8000/article/{{post.id}}"> {{ post.title }}</a></h2>
<button class="fold-button">свернуть</button>
<div class="article-info">
<div class="article-author">{{ post.author.username }}</div>
<div class="article-created-date">{{ post.created_date }}</div>
</div>
<p class="article-text">{{ post.get_excerpt }}</p>
</div>
{% endfor %}
</div>
<script src="{{ STATIC_URL }}js/fold-post.js"></script>