Change Icon on click with JS

Issue

I have the following html tags:

<p class=font-ms>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, 
  nulla et dictum interdum, nisi lorem egestas vitae scel
  <span id="dots">...</span>
  <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>
</p>
<a class="purple-head hover-black" onclick="changeIcon()" id="myBtn">
  <i id="faPlus" class="fa fa-plus font-xs"></i>
  Read more
</a>

and now i just want the page to show span more and toggle the icon plus to icon minus and read more to read less?

Solution

So select the element and toggle the class to change the icons. Check the state and set the text.

function changeIcon(anchor) {
  var icon = anchor.querySelector("i");
  icon.classList.toggle('fa-plus');
  icon.classList.toggle('fa-minus');

   anchor.querySelector("span").textContent = icon.classList.contains('fa-plus') ? "Read more" : "Read less";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<a class="purple-head hover-black" onclick="changeIcon(this)" id="myBtn">
  <i id="faPlus" class="fa fa-plus font-xs"></i>
  <span>Read more</span>
</a>

Other option is just add a class to the wrapper and change what elements are shown.

function changeIcon(anchor) {
  anchor.closest('.wrapper').classList.toggle('active');
}

.wrapper p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wrapper.active p {
  white-space: normal;
  overflow: visible;
}


.wrapper .less {
  display: none;
}

.wrapper.active .less {
  display: inline;
}

.wrapper.active .more {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<div class="wrapper">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt quis nunc euismod cursus. In non metus pharetra, vehicula sem eget, venenatis eros. Maecenas congue quam mauris, eget pretium sem mollis non. Vivamus varius neque sit amet orci sodales, non varius dui ullamcorper. Maecenas rutrum dapibus porta. Sed augue tellus, maximus id commodo nec, fringilla sed velit. Duis diam nisi, porttitor sit amet fringilla quis, tempor quis purus. Aenean elit dui, egestas ac mauris eu, finibus suscipit turpis. Aenean non sapien id ex euismod euismod. Nunc commodo vestibulum libero, at bibendum risus. Nam sagittis nec quam id egestas. Maecenas egestas egestas feugiat.</p>
  <a class="purple-head hover-black" onclick="changeIcon(this)" id="myBtn">
    <i class="more fa fa-plus font-xs"></i>
    <span class="more">Read more</span>
    <i class="less fa fa-minus font-xs"></i>
    <span class="less">Read less</span>
  </a>
</div>

Answered By - epascarello