How to create read more arrow with javascript?
Solution 1:
Update your html markup, nested wrongly some block elements inside inline elements.
Your html markup also is missing id attribute of several elements, so your js will throw errors.
Since your PSD nor your html is showing any actual dots, you could probably remove this part from your script, since it has no specific use.
const myBtn = document.getElementById('myBtn');
const moreText = document.getElementById('more');
myBtn.addEventListener('click', function(e) {
e.preventDefault();
if(window.getComputedStyle(moreText).display === 'none'){
moreText.style.display = 'inline';
myBtn.innerHTML = "<i class=\"fas fa-chevron-circle-up\"></i>";
} else {
moreText.style.display = 'none';
myBtn.innerHTML = "<i class=\"fas fa-chevron-circle-down\"></i>";
}
});#more {
display: none;
}
#myBtn {
display: inline;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-6/css/all.min.css" integrity="sha512-G2inZeefmR6vkbXThwxg1S4ypgbjtSU85+Nl1qHp/1FuyAqVL9Haw9iKsru2JKkPCx4CdFgbDd7V5jByMtmiJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel <span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span><a class="mb-3 d-inline-block text-decoration-none text-primary cursor-pointer" id="myBtn"><i class="fas fa-chevron-circle-down"></i></a></p>An example with dots and multiple paragraphs using classes instead of ids:
const myBtns = document.querySelectorAll('.myBtn');
myBtns.forEach(function(myBtn){
myBtn.addEventListener('click', function(e) {
e.preventDefault();
let more = myBtn.parentNode.querySelector('.more');
if(window.getComputedStyle(more).display === 'none'){
more.style.display = 'inline';
myBtn.parentNode.querySelector('.dots').style.display = 'none';
myBtn.parentNode.querySelector('.spacing').style.display = 'inline-block';
myBtn.innerHTML = "<i class=\"fas fa-chevron-circle-up\"></i>";
} else {
more.style.display = 'none';
myBtn.parentNode.querySelector('.spacing').style.display = 'none';
myBtn.parentNode.querySelector('.dots').style.display = 'inline';
myBtn.innerHTML = "<i class=\"fas fa-chevron-circle-down\"></i>";
}
});
});.more {
display: none;
}
.myBtn {
display: inline;
}
.spacing {
display: none;
margin-bottom: 1rem;
width: 100%;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-6/css/all.min.css" integrity="sha512-G2inZeefmR6vkbXThwxg1S4ypgbjtSU85+Nl1qHp/1FuyAqVL9Haw9iKsru2JKkPCx4CdFgbDd7V5jByMtmiJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel <span class="dots">...</span><span class="spacing"></span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span><a class="mb-3 d-inline-block text-decoration-none text-primary cursor-pointer myBtn"><i class="fas fa-chevron-circle-down"></i></a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel <span class="dots">...</span><span class="spacing"></span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span><a class="myBtn mb-3 d-inline-block text-decoration-none text-primary cursor-pointer"><i class="fas fa-chevron-circle-down"></i></a></p>