Tengo las siguientes etiquetas html:
<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>y ahora solo quiero que la página muestre más y cambie el ícono más al ícono menos y lea más para leer menos.
Así que seleccione el elemento y cambie la clase para cambiar los íconos. Compruebe el estado y establezca el texto.
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>Otra opción es simplemente agregar una clase al contenedor y cambiar los elementos que se muestran.
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>