Background

I have 2 content types. I want to display a set of filters, followed by 2 tabs, one for each content type, which will show a filtered list of results based on those filters (the fields that the filters are based on are in both content types). This page is about how to do that. It uses a combination of jQuery (already built into Drupal core), CSS, and a basic HTML structure that the results will dynamically be inserted into.

CSS code, jQuery code, HTML structure

Note: Credit for this coding should go to: http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery

CSS Code

ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px; /*--Set height of tabs--*/
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #e0e0e0;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
	background: #fff;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}

jQuery Code

(This should go in your .js file)

$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});

HTML Structure

<ul class="tabs">
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        <!--Content-->
    </div>
    <div id="tab2" class="tab_content">
       <!--Content-->
    </div>
</div>

Main Point of this Page: How to Put Views Results into this HTML Structure... (2 Possible Methods)

Method A

This uses multiple queries to display a separate tab for each content type (shared filters, one query per content type)

For this method, I had 3 different views.
-One view was just for the exposed filters: I enabled the option to show the exposed filters in a block, enabled that block for the page I wanted them to appear on, and then on the custom node template for that page I just didn't embed the actual view (so it doesn't matter what fields are in the view).
-There was also a view just for content type A, and a view just for content type B. Each of these views had the same exposed filters as the view mentioned above, and both had the "exposed form in block" option enabled, but I didn't actually enable the blocks for these 2 views.

Code for custom node template:

<?php 
// This code would go in your custom node template ("node-myregion.tpl.php" for me)
$view0 = views_get_view('FILTERSVIEWNAME','default');
$view0->override_path = $_GET['q'];
$viewsoutput0 = $view0->preview();

$view1 = views_get_view('VIEWNAMEFORCONTENTTYPEA','default');
$view1->override_path = $_GET['q'];
$viewsoutput1 = $view1->preview();

$view2 = views_get_view('VIEWNAMEFORCONTENTTYPEB','default');
$view2->override_path = $_GET['q'];
$viewsoutput2 = $view2->preview();


?>

<ul class="2tabs">
    <li><a href="#typeA">CONTENTTYPEA</a></li>
    <li><a href="#typeB">CONTENTTYPEB</a></li>
</ul>

<div class="tab_container">
    <div id="typeA" class="tab_content">
        <?php print $viewsoutput1; ?>
    </div>
    <div id="typeB" class="tab_content">
        <?php print $viewsoutput2; ?>
    </div>
</div>

Method B

This is for splitting the results of 1 query into 2 different tabs (one for each content type)

Why Method B was not as good as Method A in my situation: Because Method B is taking the results of just one query and separating that one query into multiple tabs, you can't specify different characteristics for each content type via the Views interface. For example, you can't easily tell Views to display 10 results for type A and 10 results for type B. (If you tell Views to display 20 results for the whole view, it might be split up with 15 type A results and 5 type B results).

Code for custom views-view--YOURVIEWNAME.tpl.php:

<?php 
// This code would go in your custom views-view--YOURVIEWNAME.tpl.php file

$contenttypeArows = '';
$contenttypeCrows = '';


$viewstuff = $view->result;


foreach ($viewstuff as $listingnumber=>$listing):
	if($listing->node_type=='CONTENTTYPEA') {
		$contenttypeArows .= $rows[$listingnumber].'<br />';
	}else { 
		$contenttypeBrows .= $rows[$listingnumber].'<br />';
	}
endforeach;
?>

<div class="view-content">

	<ul class="tabs">
		<?php if(!empty($contenttypeArows)): ?>
			<li><a href="#typeA">CONTENTTYPEA</a></li>
		<?php endif; ?>
		<?php if(!empty($contenttypeBrows)): ?>
			<li><a href="#companies">CONTENTTYPEB</a></li>
		<?php endif; ?>
	</ul>

				
	<div class="tab_container">
		<?php if(!empty($contenttypeArows)): ?>
			<div id="typeA" class="tab_content">
				<?php print $contenttypeArows; ?>
			</div>
		<?php endif; ?>
		<?php if(!empty($contenttypeBrows)): ?>
			<div id="typeB" class="tab_content">
				<?php print $contenttypeBrows; ?>
			</div>
		<?php endif; ?>
	</div>

</div>