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

*Obviously there is no onclick attribute for a tag.* <-- Not true. — Scott Marcus, Mar 21 '19 at 19:07
@GrantJamieson You should also check out my answer below as using an `a` tag for your use case is incorrect. — Scott Marcus, Mar 21 '19 at 19:14

Scott Marcus · Accepted Answer · 2019-03-21T19:01:55.827

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>

score 0 · Answer 2 · answered Mar 21 '19 at 18:35

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>

score 0 · Answer 3 · answered Mar 21 '19 at 18:35

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>

Thanks mate working now!! I though a tags couldn’t use on click but there you go. Cheers — Jam12345, Mar 21 '19 at 18:46
@GrantJamieson See my answer. You shouldn't use `a` tags like this. — Scott Marcus, Mar 21 '19 at 18:53

JavaScript show/hide elements by a tag

3 Answers3