Q:

onclick not working as expected

I have a script which expands an accordion menu when clicked. 
I select the required menu item by using getElementsByClassName
window.onload = function() {
 var acc = document.getElementsByClassName("accordion_f");
 //  var acc = document.querySelectorAll(".accordion_f");
 var i; 

// test code start
 acc[10].classList.toggle("active");
 acc[10].nextElementSibling.classList.toggle("show");
// test code end

 for (i = 0; i < acc.length; i++) {
   acc[i].onclick = function(){
//        acc[i].classList.toggle("active");
   this.classList.toggle("active");
//        acc[i].nextElementSibling.classList.toggle("show");
   this.nextElementSibling.classList.toggle("show");
   }
 }
};  

Unfortunately the onclick will not trigger, I am not sure what I am doing wrong. 
I tested the getElementsByClassName by using
acc[10].classList.toggle("active");
acc[10].nextElementSibling.classList.toggle("show");

This works correctly so getElementsByClassName is working
I also tried using document.querySelectorAll this also worked
I tried using this and acc[i] neither seemed to work.  But I sense this is not the problem as when I inspect the html elements and check Events, I see no event handlers registered on the current element. 
my html looks like this:
<button class="accordion_f">24/7 Activity Tracking</button>
<div class="panel">
      <p>Tracks your daily activity at five intensity levels for 24 hours a day, seven days a week, and provides a complete picture of all of your activity.  It counts your active time, daily burnt calories, steps, distance from steps and sleep.</p>
</div>

So in summary why does this work:
 acc[10].classList.toggle("active");
 acc[10].nextElementSibling.classList.toggle("show");

But this does not work or even register on elements
   acc[i].onclick = function(){

UPDATE
My accordion menu is inside a Tab menu which has it's own JavaScript to change tabs:
var newHTML = document.getElementById(newTab).innerHTML;
document.getElementById('first_View').innerHTML = newHTML;

I moved the accordion menu outside the Tab menu and onclick works.  
If I comment out the above code from the tab menu script, my accordion menu works, but then the Tab menu will not change. 
Further testing using addEventListener instead of onclick:
window.onload = function() {
  var acc = document.getElementsByClassName("accordion_f");
  var i; 

// test code start
  acc[10].classList.toggle("active");
  acc[10].nextElementSibling.classList.toggle("show");
// test code end

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener('click', expand_m, false); 
  } 
};  

function expand_m(){      
   this.classList.toggle("active");
   this.nextElementSibling.classList.toggle("show");
}

This does exactly the same as the original onclick code above, when I inspect the html elements and check Events, I see no event handlers registered on the current element, so clicking does not work for me, unless I stop the innerHTML changes. 
Any help would be appreciated. 

A:

The problem was the embedding my javascript in another menu, the javascript from the tab menu was overwriting my accordion menu javascript. 
So I simply called the accordion function at the end of the Tab menu and the onclicks started working. 
function changeTab(tab){        
var newTab = "view"+tab;
var element_id = "t";
var newHTML = document.getElementById(newTab).innerHTML;  
document.getElementById('first_View').innerHTML = newHTML; 

accord_menu();         
}

function accord_menu() {
  var acc = document.getElementsByClassName("accordion_f");
  var i; 

  for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
      this.classList.toggle("active");
      this.nextElementSibling.classList.toggle("show");
    } 
  } 
}

