jQuery selection show/hide not working when accordion slider is added for small screens
===

I have a product menu where the user can click any button and only the data regarding that selection will show. This works perfect.

When the page is resized to a smaller window (or on mobile), this menu and all corresponding data is hidden and an accordion slider menu is displayed instead, adding similar functionality for smaller screens.

Without the accordion added, the first menu works great. Once the code is added for the accordion, the regular menu functionality dies. Why?

Here is all the pertinent code (plus all scripts used in case they're what's causing the issue:

    <head>		
		<script type="text/javascript">
		if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
   	 	var viewportmeta = document.querySelector('meta[name="viewport"]');
  		  if (viewportmeta) {
  	      viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
  	      document.body.addEventListener('gesturestart', function () {
   	         viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
   	    	 }, false);
  	  		}
		}
		</script>


		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
 
			$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top}, 800);
			});
		});
		</script>
				
		
		<script type="text/javascript">
		jQuery.noConflict();
			jQuery(function(){
   			 jQuery('.targetDiv').hide();
    			jQuery('#div1').show();
    
        	jQuery('.showthis').click(function(){
              jQuery('.targetDiv').hide();
              jQuery('#div'+$(this).attr('target')).show();
        	});
		});
		</script>

			
		<script type="text/javascript" src="http://use.typekit.com/pve7kmc.js"></script>
		<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
		

		<link rel="stylesheet" type="text/css" href="./engine1/style.css">
		<style type="text/css">a#vlb{display:none}</style>
		<script type="text/javascript" src="./engine1/jquery.js"></script>
		<script type="text/javascript" src="./engine1/wowslider.js"></script>	
	
	

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script type="text/javascript">
		 	jQuery(function() {

      			jQuery("<select />").appendTo("nav");
      
      			jQuery("<option />", {
		         "selected": "selected",
        		 "value"   : "",
		         "text"    : "Navigation"
		      }).appendTo("nav select");

		      jQuery("nav ul.stacked_nav a").each(function() {
		       var el = jQuery(this);
		       jQuery("<option />", {
		           "value"   : el.attr("href"),
		           "text"    : el.text()
		       }).appendTo("nav select");
		      });

		      jQuery("nav select").change(function() {
		        window.location = jQuery(this).find("option:selected").val();
      });
	 
	 });
	</script>


	</head>
	<body>	
	<div id=container>
		<div id=nav_container>
			<nav>
				<ul class=full_nav>
  					<li><a href="#about_link" class=scroll>About</a></li>
					<li><a href="#products" class="scroll showthis" target="1">Products</a>
				            <ul class=dropmenu>
    					        <li><a href="#products" class="scroll showthis" target="1">&#45; Flow Nozzles &amp; Meter Runs</a></li>
    					        <li><a href="#products" class="scroll showthis" target="2">&#45; Orifice Plates &amp; Flanges</a></li>
 	   				        <li><a href="#products" class="scroll showthis" target="3">&#45; Orifice Plate Meter Runs</a></li>
   					        <li><a href="#products" class="scroll showthis" target="4">&#45; Venturi Tubes</a></li>
   				                <li><a href="#products" class="scroll showthis" target="5">&#45; HHR FlowPak</a></li>
					       <li><a href="#products" class="scroll showthis" target="6">&#45; HHR Flow Tubes</a></li>
					      <li><a href="#products" class="scroll showthis" target="7">&#45; PTC6 Test Section</a></li>
					     <li><a href="#products" class="scroll showthis" target="8">&#45; Accessories</a></li>
	    			          </ul>
			                </li>
				        <li><a href="#contact" class=scroll>Contact</a></li>
  					<li><a href="#findarep" class=scroll>Find a Rep.</a></li>
				    </ul>
				</nav>
			</div>
						
			
					
			<section id=products name=products>
					
				<div class=buttons>
					<ul>
						<li><a class=showthis target="1">Flow Nozzles <br>&amp; Meter Runs</a></li>
						<li><a class=showthis target="2">Orifice Plates <br>&amp; Flanges</a></li>
						<li><a class=showthis target="3">Orifice Plate <br>Meter Runs</a></li>
						<li><a class=showthis target="4">Venturi <br>Tubes</a></li>
						<li><a class=showthis target="5">HHR <br>FlowPak</a></li>
						<li><a class=showthis target="6">HHR <br>Flow Tubes</a></li>
						<li><a class=showthis target="7">PTC6 <br>Test Section</a></li>
						<li><a class=showthis target="8">Accessories</a></li>
					</ul>
				</div>
				
				
				<div class=content>
					<div id=div1 class=targetDiv>
						<h4>Flow Nozzles &amp; Meter Runs</h4>
						<p>......</p>			
					</div>
					
					
					
					<div id=div2 class=targetDiv>
						<h4>Orifice Plates &amp; Flanges</h4>
						<p>......</p>
					</div>
					
					
					
					<div id=div3 class=targetDiv>
						<h4>Orifice Plate Meter Runs</h4>
						<p>.....</p>
					</div>
				</div>
				


				<div id="vertical_container">
				
				
				<script type="text/javascript" src="http://gp3designs.com/starter/fluidic/js/prototype.js"></script>
				<script type="text/javascript" src="http://gp3designs.com/starter/fluidic/js/effects.js"></script>
				<script type="text/javascript" src="http://gp3designs.com/starter/fluidic/js/accordion.js"></script>

				<script type="text/javascript">

					Event.observe(window, 'load', loadAccordions, false);
						function loadAccordions() {		
						var bottomAccordion = new accordion('vertical_container');

					bottomAccordion.activate($$('#vertical_container .accordion_toggle')[0]);
					}		
				</script>			
			
	
				
				
					<div class="accordion_toggle">Flow Nozzles &amp; Meter Runs</div>
					<div class="accordion_content">
						<p>......</p>	
					</div>

					<div class="accordion_toggle">Orifice Plates &amp; Flanges</div>
					<div class="accordion_content">
						<p>......</p>
					</div>

					<div class="accordion_toggle">Orifice Plate Meter Runs</div>
					<div class="accordion_content">
						<p>......</p>
					</div>
						
				</div>
			</section>
			
			


	</body>
</html>
