<script type="text/javascript">
	$(document).ready(function(){
		$('.project a.button-open').click(function(){
                        $(this).parents('.project:first').find('.project-nav').hide();
			return false;
		});
	});
	</script>

<div id="container">
	<br />
	<br />
	<br />
	<br />
	<div class="project">
		<p>hey 1</p>
	   <div class="project-header">
			<p>hey</p>
	   		<a href="." class="button-open">Close<p>hey</p><p>hey</p><p>hey</p></a>
	   </div> <!-- close .project-header -->

	   <ul class="project-nav">
		<li><p>hey project-nav</p></li>
	       <li class="here"><a href=".">Add note</a></li>
	   </ul> <!-- close .project-nav -->
	</div> <!-- close .project -->
	<br />
	<br />
	<br />
	<br />
	<div class="project">
	   <div class="project-header">
	   <a href="." class="button-open">Close<p>hey</p><p>hey</p><p>hey</p></a>
	   </div> <!-- close .project-header -->

	   <ul class="project-nav">
	       <li class="here"><a href=".">Add note</a></li>
	   </ul> <!-- close .project-nav -->
	</div> <!-- close .project -->

<script type="text/javascript">
	$(document).ready(function(){
		$('.project a.button-open').click(function(){
			$(this).parent().parent().find(".project-nav").hide();
			return false;
		});
	});
	</script>

<div id="container">
	<br />
	<br />
	<br />
	<br />
	<div class="project">
		<p>hey 1</p>
	   <div class="project-header">
			<p>hey</p>
	   		<a href="." class="button-open">Close<p>hey</p><p>hey</p><p>hey</p></a>
	   </div> <!-- close .project-header -->

	   <ul class="project-nav">
		<li><p>hey project-nav</p></li>
	       <li class="here"><a href=".">Add note</a></li>
	   </ul> <!-- close .project-nav -->
	</div> <!-- close .project -->
	<br />
	<br />
	<br />
	<br />
	<div class="project">
	   <div class="project-header">
	   <a href="." class="button-open">Close<p>hey</p><p>hey</p><p>hey</p></a>
	   </div> <!-- close .project-header -->

	   <ul class="project-nav">
	       <li class="here"><a href=".">Add note</a></li>
	   </ul> <!-- close .project-nav -->
	</div> <!-- close .project -->

<script type="text/javascript">
	$(document).ready(function(){
				
		$('.project a.button-open').click(function(){
			//alert();
			//
			$(this).parent().parent().find(".project-nav").hide();
			
			//$(this).parent().parent('.project-nav').hide();
			return false;
		});
		
		
	});
	</script>

<div id="container">
	<br />
	<br />
	<br />
	<br />
	<div class="project">
		<p>hey 1</p>
	   <div class="project-header">
			<p>hey</p>
	   		<a href="." class="button-open">Close<p>hey</p><p>hey</p><p>hey</p></a>
	   </div> <!-- close .project-header -->

	   <ul class="project-nav">
		<li><p>hey project-nav</p></li>
	       <li class="here"><a href=".">Add note</a></li>
	   </ul> <!-- close .project-nav -->
	</div> <!-- close .project -->
	<br />
	<br />
	<br />
	<br />
	<div class="project">
	   <div class="project-header">
	   <a href="." class="button-open">Close<p>hey</p><p>hey</p><p>hey</p></a>
	   </div> <!-- close .project-header -->

	   <ul class="project-nav">
	       <li class="here"><a href=".">Add note</a></li>
	   </ul> <!-- close .project-nav -->
	</div> <!-- close .project -->

Navigating/Traversing Elements With jQuery

javascript

jQuery