loops - Silverstripe Bootstrap Accordion Sidebar -
hi iam creating site silverstripe , trying create dynamic sidenav using bootstrap accordion, have got working using $pos create unique values id , data-parent attributes.
i'm running trouble 3rd level items having same id , data-parent values earlier items on list $pos resetting.
my code following:
<div id="extra-links-section" class="extra-nav"> <div class="list-group panel"> <% loop menu(4) %> <a class="$linkingmode list-group-item list-group-item-success" href="<% if $children && urlsegment != 'coaches-and-managers' %>#dropdown$pos<% else %>$link<% end_if %>" <% if $children && urlsegment != 'coaches-and-managers' %>data-toggle="collapse"<% end_if %> data-parent="#extra-links-section">$title <% if $children && urlsegment != 'coaches-and-managers' %><i class="fa fa-caret-down"></i><% end_if %></a> <% if $children && urlsegment != 'coaches-and-managers' %> <div class="collapse list-group-submenu" id="dropdown$pos"> <% loop $children %> <a class="$linkingmode list-group-item list-group-item-success" href="<% if $children %>#dropdown$pos<% else %>$link<% end_if %>" <% if $children %>data-toggle="collapse"<% end_if %> data-parent="#dropdown$pos">$title <% if $children %><i class="fa fa-caret-down"></i><% end_if %></a> <% if $children %> <div class="collapse list-group-submenu" id="dropdown$pos"> <% loop $children %> <a class="$linkingmode list-group-item list-group-item-success" href="<% if $children %>#dropdown$pos<% else %>$link<% end_if %>" <% if $children %>data-toggle="collapse"<% end_if %> data-parent="#dropdown$pos">$title <% if $children %><i class="fa fa-caret-down"></i><% end_if %></a> <% if $children %> <div class="collapse list-group-submenu" id="dropdown$pos"> <% loop $children %> <a class="$linkingmode list-group-item list-group-item-success" data-parent="#dropdown$pos" href="$link">$title</a> <% end_loop %> </div> <% end_if %> <% end_loop %> </div> <% end_if %> <% end_loop %> </div> <% end_if %> <% end_loop %>
is functionality possible $pos, can see work if did not have many children pages.. need use js work? solution appreciated.
code output after drawrdesign's suggestion: (i've removed if tags because of character limit)
<div class="extra-nav" id="extra-links-section"> <div class="list-group panel"> <a class="link list-group-item list-group-item-success" data-parent="#extra-links-section" href= "/sport/clubs/rugby/first-xv/">first xv</a> <a class= "link list-group-item list-group-item-success" data-parent= "#extra-links-section" href="/sport/clubs/rugby/second-xv/">second xv</a> <a class="link list-group-item list-group-item-success" data-parent="#extra-links-section" href= "/sport/clubs/rugby/under-16/">under 16</a> <a class= "link list-group-item list-group-item-success" data-parent= "#extra-links-section" href="/sport/clubs/rugby/under-15/">under 15</a> <a class="link list-group-item list-group-item-success" data-parent="#extra-links-section" href= "/sport/clubs/rugby/under-14a/">under 14a</a> <a class= "link list-group-item list-group-item-success" data-parent= "#extra-links-section" href="/sport/clubs/rugby/under-14b/">under 14b</a> <a class= "link list-group-item list-group-item-success collapsed" data-parent="#extra-links-section" data-toggle="collapse" href= "/sport/clubs/rugby/#dropdown1-7">draws <i class= "fa fa-caret-down"></i></a> <div class="list-group-submenu collapse" id="dropdown1-7" style= "height: 0px;"> <a class="link list-group-item list-group-item-success" data-parent="#dropdown7-1" href= "/sport/clubs/rugby/draws/2nd-may-2015/">2nd may 2015</a> <a class="link list-group-item list-group-item-success" data-parent="#dropdown7-2" href= "/sport/clubs/rugby/draws/9th-may-2015/">9th may 2015</a> <a class="link list-group-item list-group-item-success" data-parent="#dropdown7-3" href= "/sport/clubs/rugby/draws/16th-may-2015/">16th may 2015</a> </div><a class= "link list-group-item list-group-item-success collapsed" data-parent="#extra-links-section" data-toggle="collapse" href= "/sport/clubs/rugby/#dropdown1-8">results <i class= "fa fa-caret-down"></i></a> <div class="list-group-submenu collapse" id="dropdown1-8" style= "height: 0px;"> <a class="link list-group-item list-group-item-success" data-parent="#dropdown8-1" href= "/sport/clubs/rugby/results-2/2nd-may-2015/">2nd may 2015</a> <a class="link list-group-item list-group-item-success" data-parent="#dropdown8-2" href= "/sport/clubs/rugby/results-2/9th-may-2015/">9th may 2015</a> </div><a class="link list-group-item list-group-item-success" data-parent="#extra-links-section" href= "/sport/clubs/rugby/coaches-and-managers/">coaches , managers</a> <a class="link list-group-item list-group-item-success collapsed" data-parent="#extra-links-section" data-toggle="collapse" href= "/sport/clubs/rugby/#dropdown1-10">previous seasons <i class= "fa fa-caret-down"></i></a> <div class="list-group-submenu collapse" id="dropdown1-10" style= "height: 0px;"> <a class="link list-group-item list-group-item-success" data-parent="#dropdown10-1" data-toggle="collapse" href= "/sport/clubs/rugby/#dropdown10-1">2014 <i class= "fa fa-caret-down"></i></a> <div class="list-group-submenu collapse in" id="dropdown10-1" style="height: auto;"> <a class="link list-group-item list-group-item-success" data-parent="#dropdown1-1" href= "/sport/clubs/rugby/previous-seasons/2014/first-xv-2014/">first xv 2014</a> <a class= "link list-group-item list-group-item-success" data-parent= "#dropdown1-7" data-toggle="collapse" href= "/sport/clubs/rugby/#dropdown1-7">draws <i class= "fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="dropdown1-7"> <a class="link list-group-item list-group-item-success" data-parent="#dropdown7-1" href= "/sport/clubs/rugby/previous-seasons/2014/draw/5th-april-2014/"> 5th april 2014</a> <a class= "link list-group-item list-group-item-success" data-parent="#dropdown7-2" href= "/sport/clubs/rugby/previous-seasons/2014/draw/12th-april-2014/"> 12th april 2014</a> <a class= "link list-group-item list-group-item-success" data-parent="#dropdown7-14" href= "/sport/clubs/rugby/previous-seasons/2014/draw/9th-august-2014/"> 9th august 2014</a> <a class= "link list-group-item list-group-item-success" data-parent="#dropdown7-15" href= "/sport/clubs/rugby/previous-seasons/2014/draw/highlanders-draw-2014/"> highlanders draw 2014</a> </div><a class= "link list-group-item list-group-item-success" data-parent= "#dropdown1-8" data-toggle="collapse" href= "/sport/clubs/rugby/#dropdown1-8">results <i class= "fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="dropdown1-8"> <a class="link list-group-item list-group-item-success" data-parent="#dropdown8-1" href= "/sport/clubs/rugby/previous-seasons/2014/results-2/5th-april-2014/"> 5th april 2014</a> <a class= "link list-group-item list-group-item-success" data-parent="#dropdown8-2" href= "/sport/clubs/rugby/previous-seasons/2014/results-2/12th-april-2014/"> 12th april 2014</a> <a class= "link list-group-item list-group-item-success" data-parent="#dropdown8-13" href= "/sport/clubs/rugby/previous-seasons/2014/results-2/highlanders-points-table/"> highlanders points table</a> </div> </div><a class="link list-group-item list-group-item-success" data-parent="#dropdown10-2" data-toggle="collapse" href= "/sport/clubs/rugby/#dropdown10-2">2013 <i class= "fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="dropdown10-2"> <a class="link list-group-item list-group-item-success" data-parent="#dropdown2-1" href= "/sport/clubs/rugby/previous-seasons/2013/first-xv-2013/">first xv 2013</a> <a class= "link list-group-item list-group-item-success" data-parent= "#dropdown2-7" href= "/sport/clubs/rugby/previous-seasons/2013/under-13-2013/">under 13 2013</a> <a class= "link list-group-item list-group-item-success" data-parent= "#dropdown2-8" data-toggle="collapse" href= "/sport/clubs/rugby/#dropdown2-8">draws <i class= "fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="dropdown2-8"> <a class="link list-group-item list-group-item-success" data-parent="#dropdown8-1" href= "/sport/clubs/rugby/previous-seasons/2013/draws/11th-15th-may-2013/"> 11th - 15th may 2013</a> <a class= "link list-group-item list-group-item-success" data-parent="#dropdown8-2" href= "/sport/clubs/rugby/previous-seasons/2013/draws/18th-22nd-may-2013/"> 18th - 22nd may 2013</a> <a class= "link list-group-item list-group-item-success" data-parent="#dropdown8-12" href= "/sport/clubs/rugby/previous-seasons/2013/draws/24th-30th-august-2013/"> 24th - 30th august 2013</a> <a class= "link list-group-item list-group-item-success" data-parent="#dropdown8-13" href= "/sport/clubs/rugby/previous-seasons/2013/draws/highlanders-competition-draw/"> highlanders competition draw</a> </div><a class= "link list-group-item list-group-item-success" data-parent= "#dropdown2-9" data-toggle="collapse" href= "/sport/clubs/rugby/#dropdown2-9">results <i class= "fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="dropdown2-9"> <a class="link list-group-item list-group-item-success" data-parent="#dropdown9-1" href= "/sport/clubs/rugby/previous-seasons/2013/results-2/11th-may-2013/"> 11th may 2013</a> <a class= "link list-group-item list-group-item-success" data-parent="#dropdown9-10" href= "/sport/clubs/rugby/previous-seasons/2013/results-2/10th-august-2013/"> 10th august 2013</a> <a class= "link list-group-item list-group-item-success" data-parent="#dropdown9-11" href= "/sport/clubs/rugby/previous-seasons/2013/results-2/17th-august-2013/"> 17th august 2013</a> <a class= "link list-group-item list-group-item-success" data-parent="#dropdown9-12" href= "/sport/clubs/rugby/previous-seasons/2013/results-2/24th-august-2013/"> 24th august 2013</a> </div> </div> </div><a class="link list-group-item list-group-item-success" data-parent="#extra-links-section" href= "/sport/clubs/rugby/contacts/">contacts</a> </div> </div>
use:
{$up.pos}-{$pos} to parent's position make position unique.
Comments
Post a Comment