Hide Show troubles - Please Help, I'm lost

JavaScript
1

I’m extremely new to jQuery, and I really like this sample, but I current scenario on a site I’m building, and I can’t figure out how to get my nav to work properly.

<div id=“itemNav”>
‘this part contains 6 image buttons’ class=“btnLocal” (each has its own id)
</div>
<div id=“itemScene1”>
‘this contains 5 image buttons’ class=“btnItem” (each has its own id)
</div>

There are 6 seperate “itemScene” divs, one for each of the first set of buttons located in the “itemNav” div. Each “itemScene” div contains its own 5 buttons.

What I want to do is be able to click on a “btnLocal” button within the “itemNav” div, and have the appropriate “itemScene” div show, and the others hide.

I’ve tried several ways, but nothing seems to work. Could someone please help me. I’m more of a designer, than a coder or developer, and I’m in dire need of assistance.

Thanks

2

The below plug-in should do the job.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Button Swap</title>
	
	<script type="text/javascript" src="/js/jquery-1.4.2-min.js"></script>
	<script type="text/javascript">
		
		(function($) { 
		
			$.fn.mynav = function(config) {
			
				var defaults = {		
					// Start index
					index:0
				};
					
				var config = $.extend(defaults, config); 
		
				return this.each(function() {
			
					$(this).click(function(evt) {
						
						// Get index position of clicked button
						var pos = (function(container) {					
							var index = null;						
							return function() {
								// proxy index resolution
								if(index === null) {
									$(container).children().each(function(pos) {
										if(this === evt.target) {
											index = pos;
											return false;
										}
									});
								}	
								return index;
							};		
						})(this);
						
						// Trigger event for children of container
						if(this === $(evt.target).parent().get(0)) {
							// hide all divs except one matching clicked button position
							$(this).siblings().each(function(index,element) {
								$(this).css('display',(index === pos()?'block':'none'));
							});
						}
					
					});
					
					// Upon initiation select current tab and hide others
					$(this).children().each(function(index) {
						if(index === config.index) {
							$(this).click();
							return false;
						}
					});
			
				});
				
			};
		
		})(jQuery);
		
		$(document).ready(function() {
			$('#itemNav').mynav({index:2});
		});
	
	</script>
	
</head>
<body>
	
	
	<div id="itemNav">
		<button>One</button>
		<button>Two</button>
		<button>Three</button>
		<button>Four</button>		
	</div>
	
	<div id="itemScene1">
		<button>One 1</button>
		<button>Two 1</button>
	</div>
		
	<div id="itemScene2">
		<button>One 2</button>
		<button>Two 2</button>
		<button>Three 2</button>
		<button>Four 2</button>
	</div>
		
	<div id="itemScene3">
		<button>One 3</button>
		<button>Two 3</button>
	</div>
	
	<div id="itemScene4">
		<button>One 4</button>
		<button>Two 4</button>
		<button>Three 4</button>
	</div>

</body>
</html>
3

There are a couple of user interface techniques that jQuery provides easy access to, which in this case for you would be either tabs or the [url=“http://docs.jquery.com/UI/Accordion”]accordion interface.

4

That does sound like it’s the perfect use for the tabs interface. The presentation of the tabs doesn’t need to be done at all.

Before you discount it though, take a quick look at this sample test code:


<html>
<head>
    <style type="text/css">
    #tabs ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    #tabs li {
        display: inline;
    }
    .ui-tabs-hide {
        display: none;
    }
    </style>
</head>
<body>
<div id="tabs">
	<ul>
		<li><a href="#alpha"> A </a></li>
		<li><a href="#bravo"> B </a></li>
		<li><a href="#charlie"> C </a></li>
		<li><a href="#delta"> D </a></li>
		<li><a href="#echo"> E </a></li>
		<li><a href="#foxtrot"> F </a></li>
		<li><a href="#golf"> G </a></li>
		<li><a href="#hotel"> H </a></li>
		<li><a href="#india"> I </a></li>
		<li><a href="#juliet"> J </a></li>
		<li><a href="#kilo"> K </a></li>
		<li><a href="#lima"> L </a></li>
		<li><a href="#mike"> M </a></li>
		<li><a href="#november"> N </a></li>
		<li><a href="#oscar"> O </a></li>
		<li><a href="#papa"> P </a></li>
		<li><a href="#quebec"> Q </a></li>
		<li><a href="#romeo"> R </a></li>
		<li><a href="#sierra"> S </a></li>
		<li><a href="#tango"> T </a></li>
		<li><a href="#uniform"> U </a></li>
		<li><a href="#victor"> V </a></li>
		<li><a href="#whiskey"> W </a></li>
		<li><a href="#xray"> X </a></li>
		<li><a href="#yankee"> Y </a></li>
		<li><a href="#zulu"> Z </a></li>
	</ul>
	<div id="alpha"><p>is for Alpha</p></div>
	<div id="bravo"><p>is for Bravo</p></div>
	<div id="charlie"><p>is for Charlie</p></div>
	<div id="delta"><p>is for Delta</p></div>
	<div id="echo"><p>is for Echo</p></div>
	<div id="foxtrot"><p>is for Foxtrot</p></div>
	<div id="golf"><p>is for Golf</p></div>
	<div id="hotel"><p>is for Hotel</p></div>
	<div id="india"><p>is for India</p></div>
	<div id="juliet"><p>is for Juliet</p></div>
	<div id="kilo"><p>is for Kilo</p></div>
	<div id="lima"><p>is for Lima</p></div>
	<div id="mike"><p>is for Mike</p></div>
	<div id="november"><p>is for November</p></div>
	<div id="oscar"><p>is for Oscar</p></div>
	<div id="papa"><p>is for Papa</p></div>
	<div id="quebec"><p>is for Quebec</p></div>
	<div id="romeo"><p>is for Romeo</p></div>
	<div id="sierra"><p>is for Sierra</p></div>
	<div id="tango"><p>is for Tango</p></div>
	<div id="uniform"><p>is for Uniform</p></div>
	<div id="victor"><p>is for Victor</p></div>
	<div id="whiskey"><p>is for Whiskey</p></div>
	<div id="xray"><p>is for X-Ray</p></div>
	<div id="yankee"><p>is for Yankee</p></div>
	<div id="zulu"><p>is for Zulu</p></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
		$("#tabs").tabs();
});
</script>
</body>
5

I’ve used both jQuery accordian and tab menu’s in the past, but my goal is to give a certain functionality to my design, rather than have to change my design to fit the code.

Here is link to the page I’m working on. It’s for my portfolio.

http://elibutcher.com/portfolio.html

I have 6 icons ( 3 on top, and 3 on bottom ). Each one, uses javascript for the rollover function. Below those are 5 sub-options that directly relate to whichever icon is clicked on. I’m wanting the sub-options divs to swap out every time you select a different icon option.

So the accordian and tabs won’t work for this layout. I was hoping that I could create the 6 icons, and all six sub-option divs, with 1 visible and the other 5 hidden, and then just swap out visibility when an icon is clicked using javascript.