How to spilt tabs jquery file with codeigniter? - php

Question

Hi all I am a new of codeigniter I have stuck it a few day I a have problam with my jquery tab I can not split it I try to search google and youtube but I can not do it who can help me please Example My jquery Tab:
<div id="demopage">
<div class="container1">
<ul class="rtabs">
<li>menu</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="panel-container">
<div id="menu">
<p>menu</p>
</div>
<div id="contact">
<p>contact</p>
</div>
<div id="about">
<p>about</p>
</div>
</div>
and I try to edit in view and controller:
View
<div id="demopage">
<div class="container1">
<ul class="rtabs">
<li>menu</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="panel-container">
<div id="menu">
<p>menu</p>
</div>
<div id="contact">
<p>contact</p>
</div>
<div id="about">
<p>about</p>
</div>
</div>
And my controller:
function menu(){
$this->load->view('header');
$this->load->view('menu');
$this->load->view('footer');
function contact(){
$this->load->view('header');
$this->load->view('contact');
$this->load->view('footer');
function about(){
$this->load->view('header');
$this->load->view('about');
$this->load->view('footer');
}

Answer 1

I hope header and footer will be same for all, If so,
function your_function_name(){
$data['menu'] = $this->load->view('menu',"",true);
$data['contact'] = $this->load->view('contact',"",true);
$data['about'] = $this->load->view('about',"",true);
$this->load->view("your_view_file",$data);
}
Third parameter to view, will get the view in to a variable instead of loading it to the view. So collect all views and echo in main view file.
in view
<div class="panel-container">
<div id="menu">
<p><?php echo $menu ?></p>
</div>
<div id="contact">
<p><?php echo $contact ?></p>
</div>
<div id="about">
<p><?php echo $about ?></p>
</div>
</div>

Answer 2

Solution:
1) You need to include respective jQuery files.
2) Change your <li> 's href attribute to proper tab.
3) In your case, remove <?php echo base_url()?>.
4) The correct syntax should be: <li>menu</li>
Explanation:
jQuery tabs work as following:
1) First create a <ul> for tab headers.
2) For each <li>, a named anchor to content with href=#id-of-the-content.
3) By clicking on a <li>, only respective content will show, others will hide.