Hjälp med expanderbar meny (style.display, 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!