I have a PSD like this.
When I click on this arrow down, It must show more info like this.
But no matter how hard I try, it’s not right
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "<i class="fas fa-chevron-circle-down"></i>";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "<i class="fas fa-chevron-circle-up"></i>";
moreText.style.display = "inline";
}
}#more {
display: none;
}<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<a class="mb-3 d-inline-block text-decoration-none text-primary cursor-pointer" onclick="myFunction()" id="myBtn"><i class="fas fa-chevron-circle-down"></i></a> <span id="more">
<p>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></p>Advertisement
Answer
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>