---
title: "Hjälp med expanderbar meny (style.display, document.querySelectorAll)"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/192308-hjälp-med-expanderbar-meny-style-display-document-queryselectorall"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "audipop"
published: "2014-05-16T10:14:43.000Z"
updated: "2014-05-23T16:59:51.000Z"
replies: 3
views: 1544
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/192308-hjälp-med-expanderbar-meny-style-display-document-queryselectorall"
---

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

## #1 — audipop, 2014-05-16T10:14Z

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>

Permalänk: https://www.webforum.nu/p/192308

## #2 — audipop, 2014-05-19T15:22Z

> 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!

Permalänk: https://www.webforum.nu/p/2316218

## #3 — voigtann1, 2014-05-19T15:49Z

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...

Permalänk: https://www.webforum.nu/p/2316219

## #4 — audipop, 2014-05-23T16:59Z

Tack så mycket för hjälpen!

Permalänk: https://www.webforum.nu/p/2316254

---

Tråden på webben: https://www.webforum.nu/amne/javascript/192308-hjälp-med-expanderbar-meny-style-display-document-queryselectorall