Buttons Final

by Tom M

HTML

<div id="contentWrapper">

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


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

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

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

CSS

/*-------Smaller than 500px wide--------*/

@media screen and (max-width: 500px) {
  
  #fillMe {
    display: none;
  }
  
  #contentWrapper .article {
  display: none;
}

#contentWrapper .active .article {
  display: block;
}
  
}

/*-------Wider than 500px wide--------*/

@media screen and (min-width: 500px) {
.article {
  display: none;
}
 
 #fillMe {
   display: block;
 }
 


  
}

JavaScript

var initAccordion = function(accordionElement) {

	function handlePanelClick(event) {
  	showPanel(event.currentTarget);
  }
  
  function showPanel(panel) {
  var expandedPanel = accordionElement.querySelector(".active");
  if (expandedPanel) {
  		expandedPanel.classList.remove("active");
  }
  panel.classList.add("active");
  }
 
  var allPanelElements = accordionElement.querySelectorAll(".panel");
  for (var y = 0; y < allPanelElements.length; y++ ) {
  		allPanelElements[y].addEventListener("click", handlePanelClick);
  }
  
 //showPanel(allPanelElements[0]);
  
}
initAccordion(document.getElementById("contentWrapper"));





  let articleList = document.getElementsByClassName("article");

  	//Begin button code.
    var createfunc = function (i) {
    return function() { document.getElementById("fillMe").innerHTML = articleList[i].innerHTML;};
}


for (let i=0; i < articleList.length; i++) {
let button = document.getElementsByClassName("button");
button[i].addEventListener("click", createfunc(i));
}