Activate default tabs based on condition - codeigniter

Question

I have the following code a page that holds 3 tabs as follow:
<div id="tab-container">
<button class="tablink" onclick="openPage('Wall', this, '#F06078')" id="defaultOpen">Wall</button>
<button class="tablink" onclick="openPage('Profile', this, '#F06078')">Profile</button>
<button class="tablink" onclick="openPage('Gallery', this, '#F06078')">Gallery</button>
The idea is to make whatever tab that's called on from a controller the default and land on it. I try passing $data to the page but it's telling me it's undefined. I also think maybe storing the info in a session and calling it on the page where the tabs are, but I'm not that flexible yet with the coding.
function index ($page='wall') {
$data['defaultOpen'] = 'wall';
$data['images_model'] = $this->images_model->get_images();
$this->load->view($page, $data);
}
I know the codes are not all there right now, but hopefully you get the idea. I will probably need to use an IF statement either in php/js and I was hoping someone might give me some feedback on that. Thanks in advance for all input.

Answer 1

controller :
public function index ($page = 'wall') {
$this->load->helper('url'); // only if you haven't load helper in autoload.
$data['images_model'] = $this->images_model->get_images();
$this->load->view('viewName', $data);
}
view :
<?php $active_tab = end($this->uri->segment_array());?>
<button class="tablink<?php echo ($active_tab == 'wall')? ' active':''; ?>" onclick="openPage('Wall', this, '#F06078')" id="defaultOpen">Wall</button>
<button class="tablink<?php echo ($active_tab == 'profile')? ' active':''; ?>" onclick="openPage('Profile', this, '#F06078')">Profile</button>
<button class="tablink<?php echo ($active_tab == 'gallery')? ' active':''; ?>" onclick="openPage('Gallery', this, '#F06078')">Gallery</button>

Answer 2

The first method is to use parameters in the URL like http://localhost/example.com/home?tab=wall
Then use this URL parameter to active your tab
$tab = $this->input->get('tab'); //wall
<button class="tablink <?php if($tab == 'wall'){ echo 'active';}?>" onclick="openPage('Wall', this, '#F06078')" id="defaultOpen">Wall</button>
Apply same for other tabs as well
The second method is to pas variable to view. Use variable not a parameter in a function
function index() {
$data['defaultOpen'] = 'wall';
$data['images_model'] = $this->images_model->get_images();
$this->load->view($page, $data);
}
Use $defaultOpen like this
<button class="tablink <?php if($defaultOpen == 'wall'){ echo 'active';}?>" onclick="openPage('Wall', this, '#F06078')" id="defaultOpen">Wall</button>

Answer 3

Try something like this
// controller
public function index ($page = 'wall') {
// pass the selected data to view
$data['selectedPage'] = $page;
$data['images_model'] = $this->images_model->get_images();
$this->load->view('viewName', $data);
}
// view
// use ternary operator to set active class to tab
// example:
// <?php echo $selectedPage== 'wall' ? 'active' : '' ?>
// code above means if $selectedPage equals 'wall', set class to active,
// if not do nothing
<button class="tablink <?php echo $selectedPage== 'wall' ? 'active' : '' ?>"
onclick="openPage('Wall', this, '#F06078')"id="defaultOpen">Wall</button>
<button class="tablink <?php echo $selectedPage== 'profile' ? 'active' : '' ?>"
onclick="openPage('Profile', this,
'#F06078')">Profile</button>
<button class="tablink <?php echo $selectedPage== 'gallery' ? 'active' : '' ?>"
onclick="openPage('Gallery', this,
'#F06078')">Gallery</button>