<ul class="nav nav-tabs"> <li class="active"><a href="#item1" data-toggle="tab">Item 1</a></li> [[*item2:!empty=`<li><a href="#item2" data-toggle="tab">Item 2</a></li>`]] [[*item3:!empty=`<li><a href="#item3" data-toggle="tab">Item 3</a></li>`]] [[*item4:!empty=`<li><a href="#item4" data-toggle="tab">Item 4</a></li>`]] [[*item5:!empty=`<li><a href="#item5" data-toggle="tab">Item 5</a></li>`]] [[*item6:!empty=`<li><a href="#item6" data-toggle="tab">Item 6</a></li>`]] [[*item7:!empty=`<li><a href="#item7" data-toggle="tab">Item 7</a></li>`]] </ul>
This question has been answered by paulp. See the first response.
I would personally use jquery to add a class to the first li
<?php $output = ''; $tvIds = '1,77,9,12'; $tvIdArray = explode(',', $tvIds); $class = ' class="active" '; // Don't forget the spaces at each end $i = 1; foreach ($tvIdArray as $k => $tvId) { $tv = $modx->resource->getTVValue( (integer) $tvId); if (!empty($tv)) { $output .= '<li' . $class . '><a href="#item' . $i . '" data-toggle="tab">Item ' . $i . '</a></li>'; $class = ''; $i++; } } return $output;