Jump to content

bootsrap framework tabs with processwire


sakkoulas
 Share

Recommended Posts

Hi, I'm a totally new user of ProcessWire and i need some help with bootsrap framework

i wan to create a bootsrap tab that dynamicaly gets page-> children titles and bodys to bootsrap tab

i have this but it is not working can anyone help me. thanks

<ul class="nav nav-tabs" id="myTab">

<?php foreach ($page->children as $item){
echo "<li> <a href='{$item->name}'> {$item->title} </a></li>";
}?>
</ul>
<div class="tab-content">
<?php foreach ($page->children as $item){
echo "<div class='tab-pane' id='{$item->name}'>{$item->body}</div>";
}?>
</div>
Link to comment
Share on other sites

You need to set the first tap-pane as active by adding the class active to the div.

try this:

<div class="tab-content">
<?php 

$i = 1;
$activeClass = '';
foreach ($page->children as $item){
  if ($i == 1) $activeClass = ' active';

  echo "<div class='tab-pane $activeClass' id='{$item->name}'>{$item->body}</div>";

  $i++;
}

?>
</div>

Link to comment
Share on other sites

 <ul class="nav nav-tabs" id="myTab">

  <?php foreach ($page->children as $item){
   echo "<li> <a href='{$item->name}' data-toggle='tab'> {$item->title} </a></li>";
  }?>
 </ul>
<div class="tab-content">
<?php
$i = 1;
$activeClass = '';
foreach ($page->children as $item){
  if ($i == 1) $activeClass = ' active';
  echo "<div class='tab-pane $activeClass' id='{$item->name}'>{$item->body}</div>";
  $i++;
}
?>
</div>
Link to comment
Share on other sites

$i if i do it as you say then it shows me all the $page->body with the class active

Yep, Luis, by looking at your code I think that this is what will happen because you defined the class outside the foreach. Like this, the variable will be populated in the first time, and will stay with that value for all the others. You can change it to this:

<div class="tab-content">
<?php

$i = 1;
$activeClass = ' active';
foreach ($page->children as $item){
  if ($i == 1) $activeClass = '';

  echo "<div class='tab-pane $activeClass' id='{$item->name}'>{$item->body}</div>";

  $i++;
}

?>
</div>

or even better, do it in a more PW way :)

<div class="tab-content">
<?php

foreach ($page->children as $item){
  $activeClass = ($item === $page->child ? 'active' : ''); // page->child returns the first child of current page
  echo "<div class='tab-pane $activeClass' id='{$item->name}'>{$item->body}</div>";
}

?>
</div>
Link to comment
Share on other sites

ah sorry, try this:

<ul class="nav nav-tabs" id="myTab">

  <?php foreach ($page->children as $item){
       echo "<li> <a href='{$item->name}' data-toggle='tab'> {$item->title} </a></li>";
  }?>
</ul>
<div class="tab-content">
<?php
   $i = 1;

  foreach ($page->children as $item){
    $activeClass = '';
    if ($i === 1) $activeClass = 'active';

    echo "<div class='tab-pane $activeClass' id='{$item->name}'>{$item->body}</div>";

    $i++;
  }
?>

Edit:

Damn Diogo :D

Edit2:

Diogo I prefer the non PW way in the getting started forums.

Makes code more comprehensible for a PHP novice.

  • Like 2
Link to comment
Share on other sites

Edit2:

Diogo I prefer the non PW way in the getting started forums.

Makes code more comprehensible for a PHP novice.

I understand perfectly :) but I think it's nice to present both

  • Like 1
Link to comment
Share on other sites

now it s working, i just change the

echo "<li> <a href='{$item->name}' data-toggle='tab'> {$item->title} </a></li>";

to

echo "<li> <a href='#{$item->name}' data-toggle='tab'> {$item->title} </a></li>";

thanks guys

Link to comment
Share on other sites

  • 4 weeks later...
Typical - just when I thought I had leaned something! :)

Can you explain how that works if, for instance, I need to add a class to the first iteration?

Exactly the same way as above. Only with the difference, that the "$cnt" variable gets incremented automatically, no need to write $cnt++ at the end of the loop:

foreach ($pages->get('/news/')->children("limit=5") as $cnt => $item) {
  $firstClass = ($cnt == 0) ? "first" : "";
}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...