Issue with adding bootstrap tabs using json and php

Question

I'm having an issue with adding tabs and tab-panes from bootstrap using a json file and php.

I can successfully add the actual tab items using this piece of code:

foreach ($json_a["content"] as &$item) {
    echo '<li><a data-toggle="tab" href="#'.$item["name"].'">'.$item["name"].'</a></li>';
}

But when adding the actual tab content using this piece of code:

foreach ($json_a["content"] as &$item) {
    echo '<div class="tab-pane" id="'.$item["name"].'"></div>';

Only the first tab works... I can click on the first tab and it will display everything correctly, but the rest of the tabs won't.

I feel like I'm overlooking something very small but I've been stumped for a while.

Here's a link to the JSON file if needed. http://pastebin.com/MzYzEqM2

Thanks for the help!

Answer 1

I don't see a problem in your markup syntax, but just maybe you didn't initialize the .tab() in your JS script. Anyway, this works fine:

Sample Output

$json_url = 'http://pastebin.com/raw.php?i=MzYzEqM2';
$data = json_decode(file_get_contents($json_url), true);

?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!-- markup -->
<ul class="nav nav-tabs" role="tablist" id="myTab">
    <?php foreach($data['content'] as $content): ?>
        <li class="">
            <a href="#<?php echo $content['name']; ?>" role="tab" data-toggle="tab"><?php echo $content['name']; ?></a>
        </li>
    <?php endforeach; ?>
</ul>
<div class="tab-content">
<?php foreach($data['content'] as $content): ?>
    <div class="tab-pane" id="<?php echo $content['name']; ?>"><?php echo $content['name']; ?></div>
<?php endforeach; ?>
</div>

<script type="text/javascript">
$(function () {
    $('#myTab a:first').tab('show'); // dont FORGET this one
})
</script>