I have a row of tabs and on page load first tab is active. However when I click next or third tab. The clicked tab`s div loads way down the page as tab 1 keeps taking space even when not active.
The javascript contring the tabs in my php page is
echo '<script type="text/javascript">';
echo 'jQuery(document).ready(function(){';
echo 'jQuery("#tab'.$temp->id.' a:first").tab("show")';
echo '});';
echo '</script>';
Removing the javascript makes the tabs work fine but not tab is active on page load
You're missing the part where you actually toggle the visibility of the tabs. You're only setting the first tab to be active on page load, but you're not handling the click event to hide the other tabs.
echo '<script type="text/javascript">';
echo 'jQuery(document).ready(function(){';
echo ' jQuery("#tab'.$temp->id.' a:first").tab("show");';
echo ' jQuery("#tab'.$temp->id.' a").on("click", function() {';
echo ' jQuery("#tab'.$temp->id.' .tab-content").hide();';
echo ' var target = jQuery(this).attr("href");';
echo ' jQuery(target).show();';
echo ' });';
echo '});';
echo '</script>';
give this a shot and let me know if this works
here's my jsfiddle to show the functionality