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?
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>