I've created a vertical menu in Bootstrap + Couch (which, I've got to say, is a potent combination), but a mysterious extra space appears at the top of each menu when expanded.

Here's the code:

Code: Select all

<div class="panel panel-default">
   <div class="panel-heading">
      <h2>Menu</h2>
   </div>
   <div class="panel-body">
      <h3>Branch Services</h3>
         <div id="accordion" class="list-group">
            <cms:nested_pages masterpage='index.php' childof=k_page_name extended_info='1' ignore_show_in_menu='1'>
               <cms:if k_level_start >
                  <cms:if k_level != '0'>
                     <div class="list-group collapse" id="<cms:show k_nestedpage_name />">
                  </cms:if>
               </cms:if>
            
               <cms:if k_element_start >
                  <cms:if k_immediate_children >
                     <a class="list-group-item" data-toggle="collapse" data-parent="#accordion" data-target="<cms:concat '#' "<cms:show k_nestedpage_name />" />">
                        <cms:show k_nestedpage_title /><span class="pull-right"><b class="caret"></b></span>
                  <cms:else />
                     <cms:if k_open_external >
                        <a class="list-group-item" onclick="navAway()" href="<cms:show k_nestedpage_link />">
                        <cms:show k_nestedpage_title />
                     <cms:else />
                        <a class="list-group-item" href="<cms:show k_nestedpage_link />">
                        <cms:show k_nestedpage_title />
                     </cms:if>
                     
                  </cms:if >
               </cms:if>
               
               <cms:if k_element_end></a></cms:if >
               <cms:if (k_level_end) && (k_level!='0') ></div></cms:if>
            
         </cms:nested_pages>
         </div>
                     
      </div>
   </div>

I've attached a file of how it looks; right below "About Us", there's an extra line with no content that links to nothing.

How it looks

display_issue.PNG (14 KiB) Viewed 2548 times

[KK]

Please do a view:source and see the generated HTML.
That should give us a clue (be prepared, though - you are likely to find a liberal dose of whitespace in the generated HTML )

Can also use FireBug etc.

Thanks! I found the issue; corrected code (for anyone who wants to implement something similar):

Code: Select all

<div class="panel panel-default">
   <div class="panel-heading">
      <h2>Menu</h2>
   </div>
   <div class="panel-body">
      <h3>Branch Services</h3>
         <div id="accordion" class="list-group">
            <cms:nested_pages masterpage='index.php' childof=k_page_name extended_info='1' ignore_show_in_menu='1'>
               <cms:if k_level_start >
                  <cms:if k_level != '0'>
                     <div class="list-group collapse" id="<cms:show k_nestedpage_name />">
                  </cms:if>
               </cms:if>
            
               <cms:if k_element_start >
                  <cms:if k_immediate_children >
                     <a class="list-group-item" data-toggle="collapse" data-parent="#accordion" data-target="<cms:concat '#' "<cms:show k_nestedpage_name />" />">
                        <cms:show k_nestedpage_title /><span class="pull-right"><b class="caret"></b></span></a>
                  <cms:else />
                     <cms:if k_open_external >
                        <a class="list-group-item" onclick="navAway()" href="<cms:show k_nestedpage_link />">
                        <cms:show k_nestedpage_title />
                     <cms:else />
                        <a class="list-group-item" href="<cms:show k_nestedpage_link />">
                        <cms:show k_nestedpage_title />
                     </cms:if>
                     
                  </cms:if >
               </cms:if>
               
               <cms:if (k_element_end) && (k_level!='0') ></a></cms:if >
               <cms:if (k_level_end) && (k_level!='0') ></div></cms:if>
            
         </cms:nested_pages>
         </div>
                     
      </div>
   </div>