[Deff]

<style type="text/css">
a.Active {
 color:red;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("ul.menu li  a").click(function(){
        var Z=$(this).hasClass('Active');
        $("ul.menu li a").removeClass('Active');
        var FindClass = $(this).attr('class')
        $("#Wrap div").slideUp(500);
        if(!Z){
           $("ul.menu li  a."+FindClass).each(function(){
                $(this).addClass('Active');
           });
           $("#Wrap ."+FindClass).slideToggle(500);
        }
	return false;
  }); 
});
</script>
 
<style type="text/css">
#Wrap div{
 display:none;
}
</style>


<p>Меню 1</p>
<ul class="menu">
	<li><a href="#" class="head-1">Button</a></li>
	<li><a href="#" class="head-2">Button2</a></li>
	<li><a href="#" class="head-3">Button3</a></li>
</ul>
<p>Меню 2</p>
<ul class="menu">
	<li><p><a href="#" class="head-1">Button</a></p></li>
	<li><p><a href="#" class="head-2">Button2</a></p></li>
	<li><a href="#" class="head-3">Button3</a></li>
</ul>
<p>Меню 3</p>
<ul class="menu">
	<li><a href="#" class="head-1">Button</a></li>
	<li><a href="#" class="head-2">Button2</a></li>
	<li><a href="#" class="head-3">Button3</a></li>
</ul>


<div id="Wrap">
<div class="content head-1">Lorem ipsum dolor sit amet</div>
<div class="content head-2">Lorem ipsum dolor sit amet2</div>
<div class="content head-3">Lorem ipsum dolor sit amet3</div>
</div>