JavaScript show/hide elements by a tag

Question

I am currently using a button which when clicked will either show or hide a paragraph, I was wondering if it is possible to have a link instead of a button here? Obviously there is no onclick attribute for a tag. But I would prefer it was just a link which was clicked rather than a button.

I'll try not to bore you too much with a lot of code. The html looks like this:

 function showMore() { var dots = document.getElementById("dots"); var moreText = document.getElementById("moreInfo"); var moreText2 = document.getElementById("moreInfo2"); var btnText = document.getElementById("moreLess"); if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "See more information"; moreText.style.display = "none"; moreText2.style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "See less information"; moreText.style.display = "inline"; moreText2.style.display = "inline"; } } 

  <span id="dots">.......</span> <button onclick="showMore()" id="moreLess">See more Information</button> <p id="moreInfo" hidden> some text .</p> <p id="moreInfo2" hidden> some other text</p> 

Thanks in advance

Answer 1

Any visible element can have a click event (including an <a> element), so you can just switch the HTML to be:

<a onclick="showMore()" id="moreLess">See more Information</a>

Now, should you do this? Absolutely not. The reason is that HTML is a semantic language. This means that we use the tags that best describe what the content is. Anchor tags describe navigation and using them simply as "hooks" for a click event is the wrong use for the tag. Using the right semantic element for your content is the key to allowing various devices to know how to process that content. For example, people with vision disabilities rely on screen reading software to help them surf the web. These screen readers know that <a> elements mean that there is a way to navigate somewhere. If you use an <a> element, but not for navigation, those users will get erroneous results.

If you want something to visually look like a link, rather than a button, simply set up a span tag with a click event handler. You can even use CSS to give it the same hover effect that links have:

 #moreLess { text-decoration:underline; color:blue; cursor:pointer; } #moreLess:hover { color: red; } 

 <span onclick="showMore()" id="moreLess">See more Information</span> 

Lastly, you really shouldn't be setting up your event handling with inline HTML event attributes ( onclick ) in the first place. That's how we did event handling 25+ years ago and unfortunately, that ancient technique won't die the death it deserves because of how often people just copy other people's code without really knowing what they are copying and terrible sites like W3Schools that still promote it. Instead, you should do all your event handling in JavaScript, separate from your HTML, like this:

 document.getElementById("clickBait").addEventListener("click", function(){ console.log("Thanks!"); }); 

 #clickBait { cursor:pointer; text-decoration:underline; color:blue; } #clickBait:hover { background-color:yellow; } 

 <span id="clickBait">Click me</span> 

Answer 2

Just use a click event handler like this.

 document.addEventListener('click', (e) => { if (e.target.matches('#moreLess')) { showMore(); } }); function showMore() { var dots = document.getElementById("dots"); var moreText = document.getElementById("moreInfo"); var moreText2 = document.getElementById("moreInfo2"); var btnText = document.getElementById("moreLess"); if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "See more information"; moreText.style.display = "none"; moreText2.style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "See less information"; moreText.style.display = "inline"; moreText2.style.display = "inline"; } } 

 <span id="dots">.......</span> <a id="moreLess">See more Information</a> <p id="moreInfo" hidden> some text .</p> <p id="moreInfo2" hidden> some other text</p> 

Answer 3

You can have onclick for <a> tags. Don't forget to put href="#" if you want to look it like a link

 function showMore() { var dots = document.getElementById("dots"); var moreText = document.getElementById("moreInfo"); var moreText2 = document.getElementById("moreInfo2"); var btnText = document.getElementById("moreLess"); if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "See more information"; moreText.style.display = "none"; moreText2.style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "See less information"; moreText.style.display = "inline"; moreText2.style.display = "inline"; } } 

 <span id="dots">.......</span> <a href="#" onclick="showMore()" id="moreLess">See more Information</a> <p id="moreInfo" hidden> some text .</p> <p id="moreInfo2" hidden> some other text</p>