How to create read more arrow with javascript?-CodePudding

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  onclick="myFunction()" id="myBtn"><i ></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>

CodePudding user response：

Update your HTML markup.

Also I don't think you will get the wanted result with:

if (dots.style.display === "none")

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  id="myBtn"><i ></i></a></p>

CodePudding user response：

Biggest issue here is that your tags arent nesting correctly, so the html doesnt know how to correctly assign your elements. I also added a dots span to avoid having an error in the JS

<script>
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";
        }
    }
</script>
<style>
    #more {
        display: none;
    }
</style>
     <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="dots" style="display:inline;">...</span><a  onclick="myFunction()" id="myBtn"><i ></i></a></p> 
    
    <div 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.</p></div>

I also changed you into a div as putting a p inside a span isnt html5 spec.

CodePudding user response：

you can't have a p tag inside a span tag. Get rid of the span and place the more id on the p tag

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  onclick="myFunction()" id="myBtn"><i ></i></a>

  <p 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.</p>