Home Making dropdown visible javascript
Reply: 0

Making dropdown visible javascript

user8432
1#
user8432 Published in September 19, 2018, 6:58 pm

I made a dropdown system with razor script in Umbraco. I finally got all the children working but how do I hide the sub items that should be a dropdown list? I tried something with javascript but that seemed to open all dropdowns instead of each one individually.

Here's my code:

<div class="col-sm-3">
  <div class="well well-lg span-padding extra-padding top background-light">
    <ul class="nav nav-list tree">
      @ {
        var documentRootNodeId = Model.Content.GetPropertyValue("documentRoot", true); // Fetch recursive document root id.
        var selection = Umbraco.TypedContent(documentRootNodeId).Children.Where("Visible"); // Select all nodes below the document root.
      }
      @foreach(var item in Model.Content.Ancestor(1).Descendants("menu")) {
        foreach(var ItemChild in @item.Children("hoofdstuk")) { 
        <li> @ItemChild.Name </li>
          foreach(var Subitem in @ItemChild.Children) { 
          <li><a href = "@Subitem.Url"> @Subitem.Name </a></li>
              if (Subitem.Children.Any()) {
                foreach(var Finalitem in @Subitem.Children) { 
                  <ul>
                    <li> < a href = "@Finalitem.Url" > @Finalitem.Name </a></li>
                  </ul>
                }
              }
            }
          }
        }
      }
    </ul>
  </div>
</div>

Javascript:

function myFunction(a) {
    var itemcount = a.parentNode.getElementsByClassName("sub").length;
    for (i = 0; i < itemcount; i++) { 
        a.parentNode.getElementsByClassName("sub")[i].classList.toggle("show");
    }
}

This is what it displays:

Sub-Subtest1 and 2 needs to be hidden till we click it's ancestor which is SubTest1. Same goes for sub-subtest9.

I can't seem to get it working dynamically. If I create something with javascript it opens all the dropdown's at once and not individually.

share|improve this question
  • First provide us with your javascript, second I would advise you to use classes, and id's so that you can target the individual elements. Thanks! – N. Ivanov Nov 13 '17 at 8:52
  • I removed the javascript from the code as it wasn't working the way I wanted to. I added a class to the ul and used javascript to change the display. I'll add the javascript code anyway and adjust the html code so it uses the javascript. – Mik3NL Nov 13 '17 at 8:53

1 Answer 1

active oldest votes
up vote 1 down vote accepted
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.340026 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO