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

Popular posts from this blog

python - Healpy: From Data to Healpix map -

c - Bitwise operation with (signed) enum value -

xslt - Unnest parent nodes by child node -