bootsrap framework tabs with processwire

[sakkoulas]

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>

[onjegolders]

Hi Sakkoulas, welcome to Processwire!

Can you tell us exactly what gets output?

Normally you would specify $page->children() as opposed to $page->children but doubt that is the issue.

[Luis]

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>

[Joss]

Okay, Luis just beat me to it!

This applies to a lot of Bootstrap elements like the sliders and the carousel where you have to identify the first element as active.

Joss

[sakkoulas]

Thanks for the quick response, but confuses me the $i if i do it as you say then it shows me all the $page->body with the class active; sorry for my questions but I am new to Php

[Luis]

Can´t really follow you.

Please provide your code from the whole template.

[sakkoulas]

 <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>

[diogo]

$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>

[Luis]

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

Edit2:

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

Makes code more comprehensible for a PHP novice.

[diogo]

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

[sakkoulas]

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

[Joss]

Having just used this article to simplify some of my own code, I have written up a full tutorial on the wiki using the Bootstrap Collapse plugin as a case study

http://wiki.processwire.com/index.php/First_Child_in_a_loop

Joss

[ryan]

Joss, here's another way to do it too:

foreach($pages->get('/news/')->children("limit=5") as $cnt => $item) {
  if($cnt == 0) {
    // $item this is the first child
  }
}

[Joss]

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?

[Wanze]

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" : "";
}