Buttons

by Tom M

HTML

<button id="btn1">Button 1</button>
<div id="article1" class="article">
Your comment is very incorrect. There is absolutely an alternative (more than one, in fact) to mixing your JavaScript in with your HTML markup.
</div>

<button id="btn2">Button 2</button>
<div id="article2" class="article">
If you are programmatically generating the HTML anchors and injecting them into the DOM, it's marginally acceptable.
</div>

<button id="btn3">Button 3</button>
<div id="article3" class="article">
It's not syntactically unsupported. JavaScript supports it just fine (just as it does with applying click handlers to other elements as well). It's simply the wrong HTML markup for the task at hand
</div>

CSS

.article {
  display: none;
}

JavaScript

var x1 = document.getElementById("article1");
var x2 = document.getElementById("article2");
var x3 = document.getElementById("article3");

var button1 = document.getElementById("btn1");
var button2 = document.getElementById("btn2");
var button3 = document.getElementById("btn3");


button1.addEventListener("click", function() {
x1.classList.toggle("article");
});


button2.addEventListener("click", function() {
x2.classList.toggle("article");
});


button3.addEventListener("click", function() {
x3.classList.toggle("article");
});