Buttons 3

by Tom M

HTML

<div id="contentWrapper">
<div id="welcome" class="article">
Hello, this is the welcome message.
</div>

<p class ="button" id="btn1">Button 1</p>
<div id="article1" class="article outer">
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>


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

<p class ="button" id="btn3">Button 3</p>
<div id="article3" class="article outer">
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>


</div>

<div id="fillMe">
</div>

CSS

.article {
  display: none;
}

#fillMe {
  padding-top: 35px;
  width: 75%;
  float: right;
}

.button {

  width: 25%;
  position: absolute;
  display: inline;
}

@media screen and (max-width:500px) {
  
 #fillMe {
   display: none;
 }
 
 .article {
   display: block;
 }
 
 #btn1 {
  padding-top:0;
}

#btn2 {
  padding-top: 0;
}

#btn3 {
  padding-top: 0;
}

.button {

  position: relative;

}

#welcome {
  display: none;
}
 
}

@media screen and (min-width:500px) {
  
  #btn1 {
  padding-top:100px;
}

#btn2 {
  padding-top: 60px;
}

#btn3 {
  padding-top: 20px;
}

}


.outer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.6s ease-in-out;
}

.button:hover, .active {
  cursor: pointer;
}

JavaScript

//Event listener for page load.
document.addEventListener("load", loadFunction());
//Function to run on page load, fill the "fill me"" section with content in welcome div.
function loadFunction() { document.getElementById("fillMe").innerHTML = document.getElementById("welcome").textContent;
}

//Start listing variables for use in array.
var art1 = document.getElementById("article1");
var button1 = document.getElementById("btn1");

var art2 = document.getElementById("article2");
var button2 = document.getElementById("btn2");

var art3 = document.getElementById("article3");
var button3 = document.getElementById("btn3");

var articleArray = [art1, art2, art3];
var buttonArray = [button1, button2, button3];

//Declare media query and add listener.
var x = window.matchMedia("(max-width: 500px)")
mediaQuery(x) // Call listener function at run time
x.addListener(mediaQuery) // Attach listener function on state changes



function mediaQuery(x) {
//If window is under 500px in width.
  if (x.matches) {
//Begin accordion code
   var accordion = document.getElementsByClassName("button");
		var j;

for (j = 0; j < accordion.length; j++) {
  accordion[j].addEventListener("click", function() {
    /*toggles between adding and removing active class
      'this' keyword relates to the headerButton*/
    this.classList.toggle("active");

/*toggles between hiding and showing panel*/
/*JS slides down the content by setting max-height that is calculated depending on the panel's height*/
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
    
  } 
  else //If window if is over 500px in width.
  {
  	//Begin button code.
    var createfunc = function (i) {
    return function() { document.getElementById("fillMe").innerHTML = articleArray[i].innerHTML;};
}


for (let i=0; i < articleArray.length; i++) {
let button =...