How to create tabs

Example: Add the following to your content-single-listing.php file in themes/your_theme/easypropertylistings folder. Read how to use the  template loader built into EPL so you can create anything you want. The examples will add a tabbed area where you can place the content that you want to display.

Horizontal Tabs

<div class="my-tabs-horizontal">
	<ul>
		<li><a href="#description-tab">Description</a></li>
		<li><a href="#location-tab">Map</a></li>
		<li><a href="#details-tab">Details</a></li>
		<li><a href="#features-tab">Features</a></li>
		<li><a href="#video-tab">Video</a></li>
	</ul>
	<div id="description-tab">
		<p>Description</p>
		<?php
			do_action('epl_property_content_before');
			do_action('epl_property_the_content');
		?>
	</div>
	<div id="location-tab">
		<p>Map</p>
		<?php do_action( 'epl_property_map' ); ?>
	</div>
	<div id="details-tab">
		<p>Details</p>
		<div class="epl-tab-section epl-section-description">
			<div class="tab-content">
				<!-- heading -->
				<h2 class="entry-title"><?php do_action('epl_property_heading'); ?></h2>
				<h3 class="secondary-heading"><?php do_action('epl_property_secondary_heading'); ?></h3>
			</div>
		</div>
		<div class="epl-tab-section epl-section-property-details">
			<div class="tab-content">
				<div class="property-meta">
					<?php do_action('epl_property_available_dates');// meant for rent only ?>
					<?php do_action('epl_property_inspection_times'); ?>
				</div>
			</div>
		</div>
	</div>
	<div id="features-tab">
		<p>Features</p>
		<div class="property-details">
			<h3 class="tab-address">
				<?php do_action('epl_property_address'); ?>
			</h3>
			<?php do_action('epl_property_land_category'); ?>
			<?php do_action('epl_property_price_content'); ?>
			<?php do_action('epl_property_commercial_category'); ?>
		</div>
		<?php do_action('epl_property_tab_section_before'); ?>
		<div class="epl-tab-section epl-tab-section-features">
			<?php do_action('epl_property_tab_section'); ?>
		</div>
		<?php do_action('epl_property_tab_section_after'); ?>
	</div>
	<div id="video-tab">
		<p>Video</p>
		<?php do_action('epl_property_content_after'); // Video Hooked here ?>
	</div>
</div>
<script>epl.ui.tabs( {
    selector: '.my-tabs-horizontal',
    type: 'horizontal',
    first: 3 // Index of tab to set as default. 0 is the first tab as the index is like an array 0 1 2 3
});</script>

Vertical Tabs

<div class="my-tabs-vertical">
	<ul>
		<li><a href="#property-tab">Property Tab</a></li>
		<li><a href="#land-tab">Land Tab</a></li>
		<li><a href="#rental-tab">Rental Tab</a></li>
	</ul>
	<div id="property-tab">
		<p>Property Tab content</p>
	</div>
	<div id="land-tab">
		<p>Land Tab content</p>
	</div>
	<div id="rental-tab">
		<p>Rental Tab content</p>
	</div>
</div>
<script>epl.ui.tabs( {
    selector: '.my-tabs-vertical',
    type: 'vertical',
    first: 0 // Index of tab to set as default. 0 is the first tab as the index is like an array 0 1 2 3
});</script>

With some CSS you can design them to look anyway you like. The tabs should take on the design of your theme.