How to generate flexible number of tabs in php?

Question

Hello guys I really need your help.

I am very new php or programming in general. So maybe my question is already solved but I wasn't able to adjust the code in correct way or see the correct solution. I have the following problem: I need a procedure that can handle flexible numbers of tabs. For example if I have 5 keywords, there should be 5 tabs generated. For 3 keywords 3 tabs and so on...

I know how to handle tabs their number is known and doesn't change (like for example always three tabs with 'home', 'news' and 'registration'). But in my case, number of tabs change in time.

I tried this code:

My php part:

<?php

/* How it was handled before I tried to make it dynamically:
<button class="tablink" onclick="openPage('Home', this, 'red')" id="defaultOpen">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>

<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p> home... </p>
</div>

<div id="News" class="tabcontent">
  <h3>News</h3>
  <p> news... </p>
</div>

<div id="Contact" class="tabcontent">
  <h3>Contact</h3>
  <p> contact... </p>
</div>

<div id="About" class="tabcontent">
  <h3>About</h3>
  <p> about... </p>
</div> 


My try making the number of tabs dynamically:
*/

$current_tab_number = 0; //Number of tabs generated
$end_number=3; //this should be the number of tabs at the end

while($current_tab_number < $end_number){
    $current_tab_number = current_tab_number + 1;
?>
    <button class="tablink" onclick="openPage('$current_tab_number', this, 'red')">Name</button>
    <div id="$current_tab_number" class="tabcontent">
        <h3>Name</h3>
        <p> Some text...</p>
    </div>
<?php
}

This is my javascript:

<!-- Javascript part -->
<script>    
    
function openPage(pageName, elmnt, color) {
    // Hide all elements with class="tabcontent" by default */
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    // Remove the background color of all tablinks/buttons
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
    }
    // Show the specific tab content
    document.getElementById(pageName).style.display = "block";
    // Add the specific color to the button used to open the tab content
    elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click(); 
    
</script>       

As you can see, I only changed the php part. But since I'm a beginner, code doesen't work as expected and I have really no clue, how to adjust in correct way.

In addition it would be fantatstic, if tabs could be named flexible,too. Like 'tab 1', 'tab 2',...

I really hope, someone could help me.

So far, have a great day!

Answer 1

You can iterate over the tab names and concatenate the string to generate the html code for tabs. For example:

$tab_names = ['home', 'about', 'contact'];
$resulting_html_code = "";
foreach ($tab_names as $tab){
    $resulting_html_code .= "{$resulting_html_code} <div class='tab'>{$tab}</div>";
}

Answer 2

You need to know a name for each tab and how many to create, so create an array with the names you want, that tells you how many are needed and the name that should be used in the javascript call.

/*
My try making the number of tabs dynamically:
*/

$tabs = ['Home', 'News', 'Contact', 'About'];

foreach ($tabs as $tab){
?>
    <button class="tablink" onclick="openPage('<?php echo $tab;?>', this, 'red')>Name</button>
    <div id="<?php echo $tab;?>" class="tabcontent">
        <h3>Name</h3>
        <p> Some text...</p>
    </div>
<?php
} // endforeach

Answer 3

Key Issue

The reason your code doesn't work is because you've missed a $ symbol from the line:

$current_tab_number = current_tab_number + 1;

So, effectively, your while loop becomes infinite as you don't increment the $current_tab_number variable.

Replace that line with:

$current_tab_number = current_tab_number + 1;
// OR
$current_tab_number++;

Which then becomes:

while($current_tab_number < $end_number){
    $current_tab_number++;
    // Print tabs here
}

Alternatively you could use a for loop like:

for($i = 0; $i < $end_number; $i++){
    // print tabs here
}

Additionally

Using variables outside of PHP tags

This line:

<button class="tablink" onclick="openPage('$current_tab_number', this, 'red')">Name</button>

Will literally print the string $current_tab_number what it should be is:

<button class="tablink" onclick="openPage('<?php echo $current_tab_number; ?>', this, 'red')">Name</button>

Same here:

<div id="$current_tab_number" class="tabcontent">

<div id="<?php echo $current_tab_number; ?>" class="tabcontent">

We could easily get around this by just using echo to print the html instead. For example:

echo <<<EOT

    <button class="tablink" onclick="openPage('{$current_tab_number}', this, 'red')">Name</button>
    <div id="{$current_tab_number}" class="tabcontent">
        <h3>Name</h3>
        <p> Some text...</p>
    </div>

EOT;

This method doesn't add data to the divs

The output of this code is expected to be:

<button class="tablink" onclick="openPage('Home', this, 'red')" id="defaultOpen">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')">News</button>
<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p> home... </p>
</div>
<div id="News" class="tabcontent">
  <h3>News</h3>
  <p> news... </p>
</div>

But will actually be:

<button class="tablink" onclick="openPage('<?php echo $current_tab_number; ?>', this, 'red')">Name</button>
<div id="<?php echo $current_tab_number; ?>" class="tabcontent">
    <h3>Name</h3>
    <p> Some text...</p>
</div>
<button class="tablink" onclick="openPage('<?php echo $current_tab_number; ?>', this, 'red')">Name</button>
<div id="<?php echo $current_tab_number; ?>" class="tabcontent">
    <h3>Name</h3>
    <p> Some text...</p>
</div>

To add data to the output we need to source it from somewhere, for example:

$tab_list = [
    1 => [
        "name"    => "Home",
        "content" => "Some text for content..."
    ],
    2 => [
        "name"    => "About",
        "content" => "Some text for about..."
    ]
];

foreach($tab_list as $tab_number => $tab){
    echo "
    <button class=\"tablink\" onclick=\"openPage('{$tab_number}', this, 'red')\">Name</button>
    <div id=\"{$tab_number}\" class=\"tabcontent\">
        <h3>{$tab["name"]}</h3>
        <p>{$tab["content"]}</p>
    </div>
    ";
}