Hi

I made a tabbed navigation that represent some content coming from clonable pages.
The pure html/css is working fine. (working with Twitter Bootstrap)

With the code below, I'm getting the right tab titles and their correct contents showing up.
If I click on a different tab, that content is showing up.

But that's where my problem start.
I can only click once on a tab link, after that it seems that the link is "locked".
I can't even hover on it anymore.
If I click on every tab link, all links are showing their .active value and are unreachable.

Anyone any idea how this can be resolved?

Currently I have this html/css version online: http://www.restaurantmarcus.be/menu.php#content
No Couch implementation yet, but this maybe gives you an idea of what I am searching for.

Thanks!

Code: Select all

<div class="tabbable menu-tabs">
              <cms:pages masterpage='menu.php'>
               <ul class="nav nav-tabs">
                <li><a href="#pane<cms:show k_count />" data-toggle="tab" >
                  <cms:if my_lang='nl'><cms:show menu_title_nl /></cms:if>
                  <cms:if my_lang='fr'><cms:show menu_title_fr /></cms:if>
                  <cms:if my_lang='en'><cms:show menu_title_en /></cms:if>
                  </a>
                </li>                
              </ul>
            </cms:pages>

              <div class="tab-content">
              <cms:pages masterpage='menu.php'>
                <div id="pane<cms:show k_count />" class="tab-pane <cms:if k_count='1'>active</cms:if>">
                  <div class="col-md-12 block">
                    <div class="wrapper text-center">
                      <h2>
                        <cms:if my_lang='nl'><cms:show menu_title_nl /></cms:if>
                        <cms:if my_lang='fr'><cms:show menu_title_fr /></cms:if>
                        <cms:if my_lang='en'><cms:show menu_title_en /></cms:if>
                      </h2>
                        <p class="text-center">
                          <cms:if my_lang='nl'><cms:show menu_content_nl /></cms:if>
                          <cms:if my_lang='fr'><cms:show menu_content_fr /></cms:if>
                          <cms:if my_lang='en'><cms:show menu_content_en /></cms:if>
                        </p>
                    </div>
                  </div>
              </div>
              </cms:pages>
            </div><!-- /.tab-content -->
          </div><!-- /.tabbable -->   

This is the clonable snippet:

Code: Select all

<?php require_once( 'admin/cms.php' ); ?>
<cms:template title='Menu' clonable='1'>

    <cms:editable name='menu_title_nl' type='text' label='Naam Menu (NL)' />
    <cms:editable name='menu_title_fr' type='text' label='Naam Menu (FR)' />
    <cms:editable name='menu_title_en' type='text' label='Naam Menu (EN)' />

    <cms:editable name='menu_content_nl' type='richtext' label='Inhoud menu (NL)' />
    <cms:editable name='menu_content_fr' type='richtext' label='Inhoud menu (FR)' />
    <cms:editable name='menu_content_en' type='richtext' label='Inhoud menu (EN)' />

</cms:template>

<?php COUCH::invoke(); ?>

[KK]

Sam, that seems to be a CSS issue -
standard procedure for resolving it would be to use the same data as that in your static HTML/CSS (e.g. your design has 4 tabs so create 4 cloned pages with the same names etc.)

Now you just need to compare the HTML outputted by Couch with your static HTML - the two should be identical. If not, then you have identified the problem.

Hope this helps.

Restarted with this part and with a fresh mind.
Thanks for the tip, it helped me to get it al working!