Monitor Reply

Support

building tabs

Permalink Browser Info Environment February 15, 2014 at 12:28 PM

Hi guys,

I have two fields per item: "name" & "content". The name is displayed as a Tab and the content in this tab. When I load the page with this block the first time, no content is displayed. I need the first tab and content of the first tab to be displayed (first item) then.

I have this code for tabs:

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<?php /* This block was made with Designer Content Pro. Visithttp://theblockery.com/dcp for documentation. */ ?>
<script type="text/javascript" src="<?php  echo $this->getThemePath(); ?>/js/kube.tabs.js"></script>
<div class="units-row">
   <nav class="nav-tabs nav-tabs-v unit-30" data-toggle="tabs" data-height="equal" data-active="#1">
       <ul>
         <?php foreach ($controller->getRepeatingItems() as $item): ?>
         <li>
            <a href="#<?php $item->name->display(); ?>">
               <?php $item->name->display(); ?>
            </a>
         </li>
         <?php endforeach; ?>
       </ul>
   </nav>

Viewing 15 lines of 23 lines. View entire code block.

 
<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<?php /* This block was made with Designer Content Pro. Visithttp://theblockery.com/dcp for documentation. */ ?>
 
<script type="text/javascript" src="<?php  echo $this->getThemePath(); ?>/js/kube.tabs.js"></script>
 
<div class="units-row">
 
   <nav class="nav-tabs nav-tabs-v unit-30" data-toggle="tabs" data-height="equal" data-active="#1">
 
       <ul>
 
         <?php foreach ($controller->getRepeatingItems() as $item): ?>
         <li>
            <a href="#<?php $item->name->display(); ?>">
               <?php $item->name->display(); ?>
            </a>
         </li>
         <?php endforeach; ?>
 
       </ul>
 
   </nav>
 
 
   <section class="unit-70">
 
      <?php foreach ($controller->getRepeatingItems() as $item): ?>
      <div id="<?php $item->name->display(); ?>">
 
         <?php $item->content->display(); ?>
 
      </div>
      <?php endforeach; ?>
 
   </section>
 
</div>

Is there a possibility to receive the first item name? I need it for activate the first Tab when the page is loaded.

data-active="#Tab_one"

at #Tab_one I need some php code that displays / echoes the name of the first tab.

best regards
Torsten

Edit: I think that don't works with repeating items - after updating the content/names all content is displayed (from all items).

1 Attachment

Type:	Discussion
Status:	New

tsilbermann replied on Feb 16, 2014 at 7:29 am Permalink Reply

anyone?

theblockery replied on Feb 16, 2014 at 10:29 am Permalink Best Answer Reply

Hi Torsten,
I can't know exactly because I'm not familiar with the javascript code you're using, but I can see 2 possibilities based on your code:

1) I don't know if calling $this->getThemePath() works in a block like it does in a theme template. Try View::getInstance()->getThemePath() instead, or just put the javascript in your block's folder (where the view.php file is), in a subfolder called "js" -- concrete5 will load it automatically then.

2) You are using the "name" field for your tab links and id's -- but this will not work because the names have spaces in them. You should instead use a counter number to generate unique id's for each tab, like so:

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<?php /* This block was made with Designer Content Pro. Visithttp://theblockery.com/dcp for documentation. */ ?>
<script type="text/javascript" src="<?php  echo $this->getThemePath(); ?>/js/kube.tabs.js"></script>
<div class="units-row">
   <nav class="nav-tabs nav-tabs-v unit-30" data-toggle="tabs" data-height="equal" data-active="#block-<?php echo $bID; ?>-tab-0">
       <ul>
         <?php foreach ($controller->getRepeatingItems() as $index => $item): ?>
         <li>
            <a href="#block-<?php echo $bID; ?>-tab-<?php echo $index; ?>">
               <?php $item->name->display(); ?>
            </a>
         </li>
         <?php endforeach; ?>
       </ul>
   </nav>

Viewing 15 lines of 23 lines. View entire code block.

 
<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<?php /* This block was made with Designer Content Pro. Visithttp://theblockery.com/dcp for documentation. */ ?>
 
<script type="text/javascript" src="<?php  echo $this->getThemePath(); ?>/js/kube.tabs.js"></script>
 
<div class="units-row">
 
   <nav class="nav-tabs nav-tabs-v unit-30" data-toggle="tabs" data-height="equal" data-active="#block-<?php echo $bID; ?>-tab-0">
 
       <ul>
 
         <?php foreach ($controller->getRepeatingItems() as $index => $item): ?>
         <li>
            <a href="#block-<?php echo $bID; ?>-tab-<?php echo $index; ?>">
               <?php $item->name->display(); ?>
            </a>
         </li>
         <?php endforeach; ?>
 
       </ul>
 
   </nav>
 
 
   <section class="unit-70">
 
      <?php foreach ($controller->getRepeatingItems() as $index => $item): ?>
      <div id="block-<?php echo $controller->bID; ?>-tab-<?php echo $index; ?>">
 
         <?php $item->content->display(); ?>
 
      </div>
      <?php endforeach; ?>
 
   </section>
 
</div>

Then, the id of the first one to be active will be:

data-active="#block-<?php echo $bID; ?>-tab-0"

Hope this helps!

-Jordan

tsilbermann replied on Feb 17, 2014 at 6:08 am Permalink Reply

Hi Jordan,

thanks a lot. Your solution works fine.

Just to make sure if others need this. In this case it should be (?):

data-active="#block-<?php echo $bID; ?>-tab-0"

Best regards

Torsten

theblockery replied on Feb 17, 2014 at 11:03 am Permalink Reply

You are correct -- I've fixed my answer to reflect this.
Thanks!

Designer Content Pro

Support

building tabs

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post