Putting icon next to button
Question
i'm running into a problem. Next to the "Show More" there is an icon. When pressed it disappears, because the innerText gets replaced so I tried this:
document.getElementById("toggleButton").innerText = "Show Less <i class="fas fa-caret-down"></i>" ;
This doesn't seem to work any suggestions?
var status = "less"; function toggleText() { if (status == "less") { document.getElementById("textArea").style.display = "block"; document.getElementById("toggleButton").innerText = "Show Less"; status = "more"; } else if (status == "more") { document.getElementById("textArea").style.display = "none"; document.getElementById("toggleButton").innerText = "Show More"; status = "less" } }
<!DOCTYPE html> <html> <head> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> </head> <body> <div id="textArea" style="display: none;"> test </div> <button type="button" id="toggleButton" onclick="toggleText();" href="javascript:void(0);">Show More <i class="fas fa-caret-down"></i></button> <div id="textArea" style="display: none;"> </div </body> </html>
4 answers
solution1
3 ACCPTED 2018-05-05 23:36:14
如果文本字符串包含需要呈现的html，则需要使用innerHTML而不是innerText ：
document.getElementById("toggleButton").innerHTML
solution2
2 2018-05-05 23:40:50
I recommend to toggle a class instead, here combined with a pseudo for the 2 text variants.
Stack snippet
function toggleText() { document.getElementById("textArea").classList.toggle('hide'); document.getElementById("toggleButton").classList.toggle('less'); }
button::before { content: 'Show more '; } button.less::before { content: 'Show less '; } .textarea.hide { display: none; }
<div id="textArea" class="textarea hide"> test </div> <button type="button" id="toggleButton" onclick="toggleText();"><i class="fas fa-caret-down"></i></button> <div id="textArea2" class="textarea hide"> </div>
And with the CSS attr() you can control the text from your markup, using the data-* attribute, here combined with addEventListener , which is the recommended way to add event handlers such as the click event.
Stack snippet
var btn = document.querySelector('#toggleButton'); btn.addEventListener('click', function(e) { document.getElementById("textArea").classList.toggle('hide'); this.classList.toggle('less'); })
button::before { margin-right: 5px; /* space between text/icon */ content: attr(data-more); /* get text from attribute */ } button.less::before { content: attr(data-less); } .textarea.hide { display: none; }
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <div id="textArea" class="textarea hide"> test </div> <button type="button" id="toggleButton" data-less="Show less" data-more="Show more"><i class="fas fa-caret-down"></i></button> <div id="textArea2" class="textarea hide"> </div>
solution3
2 2018-05-05 23:40:53
The problem is that you are replacing the whole content of the button here:
document.getElementById("toggleButton").innerText = "Show Less";
You are overwriting the original text and the icon with just "Show Less" .
To fix this, you could use innerHTML instead to set the new text and the HTML for the icon:
buttonText.innerHTML = `Show Less <i class="fas fa-caret-up"></i>`;
Or you can also wrap the text in a different element to just change that part:
const button = document.getElementById("button"); const buttonText = document.getElementById("buttonText"); const more = document.getElementById("more"); let hidden = true; button.onclick = () => { if (hidden) { more.style.display = "block"; buttonText.innerText = "Show Less"; buttonText.nextElementSibling.setAttribute("data-icon", "caret-up"); hidden = false; } else { more.style.display = "none"; buttonText.innerText = "Show More"; buttonText.nextElementSibling.setAttribute("data-icon", "caret-down"); hidden = true; } };
<!DOCTYPE html> <html> <head> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> </head> <body> <button id="button"> <span id="buttonText">Show More</span> <i id="buttonIcon" class="fas fa-caret-down"></i> </button> <p id="more" style="display: none;"> MORE </p> </body> </html>
solution4
2 2018-05-05 23:52:28
Why not use unicodes instead? ⮟⮋🠋 This is as easy to use as text!
Leaving here some downwards arrows:
⮟BLACK DOWNWARDS EQUILATERAL ARROWHEAD
Hex: 2B9F | Dec: 11167
Edit : Full list removed.
Generated from: https://github.com/webdev23/unicode
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.