Reply To: jQuery Tabs

NapitWPTech Theme Support Forums Masonry Brick jQuery Tabs Reply To: jQuery Tabs

#350

Bishal Napit
Keymaster

@polov

I checked on my local install and seems to be working fine. So, have you managed those all properly, ie, in the functions.php file of the child theme, you need to have the below code:
wp_enqueue_script( 'jquery-ui-tabs' );
inside the PHP tag. Now, for the HTML code, it need to be like the below one:

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.</p>
	</div>
	<div id="tabs-2">
		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>
	</div>
	<div id="tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.</p>
	</div>
</div>

And lastly in the custom js file, you need to have the code as below to make that tabs JS to work:

jQuery( function() {
	jQuery( "#tabs" ).tabs();
} );

Hope you have got it and can do that on your own now.

Thanks.
Bishal Napit