Recursive mustache with checkbox to make drop down menu

Question

I tried to make a drop down menu using pure css, I tried to use checkbox and label with mustache template using code below:

mustache_top_level.html:

<ul class="sf-menu sf-vertical">
{{#links}}
        {{> mustache_mid_level}}
{{/links}}        
</ul>

mustache_mid_level.html:

{{#isShowInMenu}}
<li class="bd-nav-children {{#isDivider}}bd-navDivder-link{{/isDivider}}">
    {{#isVisualLink}}
    <label for="toggle-1"> <a class="bd-navPage-link" title="{{tooltip}}" data-linkType="{{linkType}}">{{title}}</a> </label>
    <input type="checkbox" id="toggle-1">
    {{/isVisualLink}}
    {{^isVisualLink}}
    <a href="{{Url}}" class="bd-navPage-link" title="{{tooltip}}" data-linkType="{{linkType}}" onclick= "return be.Nav.URLHandler(this);">{{title}}</a>
    {{/isVisualLink}}
    {{^children.isEmpty}}
        <ul class="hasan"> 
            {{#children}}              
                {{> mustache_mid_level2}}
            {{/children}}
        </ul>
    {{/children.isEmpty}}   
</li>
{{/isShowInMenu}}

css File:

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

a{ 
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: inline-block;
  margin: 60px 0 10px 0;
  cursor: pointer;
  color: #0000ff;
}

input[type=checkbox]:checked ~ .hasan{
    left:   0em; 
    top:    0em;
    position: relative;
    display: block;
}

.hasan{
    display:none;
}
.sf-vertical li:hover ul{
    left:   0em; 
    top:    0em;
    position: relative;
}

.sf-vertical, .sf-vertical li {
    width:  16em;
}

.sf-menu, .sf-menu * {
    margin:         0;
    padding:        0px;
    list-style:     none;
    background-image:url('arrowgreen.png');
    background-position: 190px 30px;
    background-repeat:no-repeat;
}

.sf-menu ul {
    position:       absolute;
    top:            -999em;
    width:          16em;
}

.sf-menu li {
    background:     #E8E8E8 ;
    border-bottom:  3px solid #ffffff;
    position:       relative;
}

.sf-menu a {
    display:        block;
    color:          #797979;
    font-weight:    bold;
    position:       relative;
    padding:        2em 1em;
    text-decoration:none;
}

.sf-menu ul li {
    width:          100%;
}

.sf-menu li li {
    background: #ffffff;
    height: 50px;
    border-bottom: none;
}

.sf-menu ul a{
    background-image: none;
}

.sf-menu li li a {
    padding:        1em 1.4em;
}

li.sf-menu li:hover, li.sf-menu li.sfHover li{
    background:     #ffffff;
}
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{
    color: #33CCCC;
}

The Problem is that when I click any of the menu elements, the check is on just for the first element checkbox not for the element i clicked. and its like what I think, all label get the same name, so the check is going just to first element, what I have to do to solve the problem?

Answer 1

Change the name of checkbox with the title name u used with mustache and it will work ok:

<label for={{title}} > <a class="bd-navPage-link" title="{{tooltip}}" data-linkType="{{linkType}}">{{title}}</a> </label>
    <input type="checkbox" id={{title}} >