Hjälp med expanderbar meny (style.display, document.querySelectorAll)

Jag har försökt skapa en meny där undermenyn ska kunna fällas ut & in med hjälp av style.display-egenskapen. Jag har kört fast ordentligt och undrar vad jag saknar? Vore oerhört tacksam för hjälp!

Länk till kod:
http://stackoverflow.com/questions/23543087/expandable-ul-list-javascript-function-with-document-queryselectorall

HTML:
<section class="meny">

<h4 class="meny1">Nyheter</h4>
<ul>
<li class="meny2"><a href="n1.html">Lokalt</a></li>
<li class="meny2"><a href="n2.html">Sverige</a></li>
<li class="meny2"><a href="n3.html">Världen</a></li>
</ul>

CSS:

.meny2
{
margin-left: 0%;
padding: 1% 0%;
display: none;
}

JS:
function toggling()
{

var nextElement = next(this);

if(nextElement.style.display == "block")
{
nextElement.style.display = "none";
}

else
{
nextElement.style.display = "block";
}
}

function next(elem) {
do
{
elem = elem.nextSibling;
}

while (elem && elem.nodeType != 1);

return elem;
}

var toggle = document.getElementsByTagName("h4");

for(var i = 0; i < toggle.length ;i++)
{
if(toggle*.className = "meny1")*
{
toggle*.onclick = toggling;
}*
}

Har klurat ut detta hittills men får det inte att fungera riktigt med att listan ska vara ihopfällbar när man går in på sidan.
queryselectorAll får jag inte till heller, vore oerhört tacksam för hjälp!

Du få nog ändra din HTML kod lite:

    <h4 class="meny1">Nyheter</h4>
    <ul class="meny2">
        <li><a href="n1.html">Lokalt</a></li>
        <li><a href="n2.html">Sverige</a></li>
        <li><a href="n3.html">Världen</a></li>
    </ul>

och JS koden kan se ut:

function toggling() {
  var nextElement = next(this);
  console.log(nextElement.style.display);
  if(nextElement.style.display == "block") {
    nextElement.style.display = "none"; 
  } else {
    nextElement.style.display = "block"; 
  }
}

function next(elem) {
  do
  {
    elem = elem.nextSibling;
  }  while (elem && elem.nodeType != 1);

  return elem; 

}

window.onload = function() {
  var toggle = document.getElementsByTagName("h4");

  for(var i = 0; i < toggle.length ;i++)
  {

    if(toggle[i].className == "meny1")

    {
      toggle[i].onclick = toggling;
    }

  } 
};

exempel: http://jsbin.com/qexego/1/edit

Tycker jag känner igen koden...

Tack så mycket för hjälpen!