So I got this little script which helps me to create tabbed content:
And here is HTML:
So in this form script works a charm. However once I try to add PHP functions inside it doesn't show up. When I check source code I can see functions nicely loaded but no content appears on the screen. Does anyone know how to fix it? Thank you.
Code:
<script type="text/javascript">
$(document).ready(function(){
$('#tabs div').hide(); // Hide all divs
$('#tabs div:first').show(); // Show the first div
$('#tabs ul li:first').addClass('active'); // Set the class of the first link to active
$('#tabs ul li a').click(function(){ //When any link is clicked
$('#tabs ul li').removeClass('active'); // Remove active class from all links
$(this).parent().addClass('active'); //Set clicked link class to active
var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
$('#tabs div').hide(); // Hide all divs
$(currentTab).show(); // Show div with id equal to variable currentTab
return false;
});
});
</script>And here is HTML:
Code:
<div id="tabs">
<ul>
<li><a href="#tab-1">Tab One</a></li>
<li><a href="#tab-2">Tab Two</a></li>
<li><a href="#tab-3">Tab Three</a></li>
<li><a href="#tab-4">Tab Four</a></li>
</ul>
<div id="tab-1">
<h3>Tab 1</h3>
<p>Some content</p>
</div>
<div id="tab-2">
<h3>Tab 2</h3>
<p>Some content</p>
</div>
<div id="tab-3">
<h3>Tab 3</h3>
<p>Some content</p>
</div>
<div id="tab-4">
<h3>Tab 4</h3>
<p>Some content</p>
</div>
</div>So in this form script works a charm. However once I try to add PHP functions inside it doesn't show up. When I check source code I can see functions nicely loaded but no content appears on the screen. Does anyone know how to fix it? Thank you.
