<ul class="menu">
    <li tabindex="1">
      <span class="title">Один</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Два</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Три</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Четыре</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Пять</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Шесть</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1"> 
      <span class="title">Семь</span>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1"> 
      <span class="title">Восемь</span>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1"> 
      <span class="title">Девять</span>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>     
  </ul>

	<script>
	  (function(){
	  
    // Добавялем кнопку закрытия каждому блоку
    $('.menu .content').append('<span class="close">x</span>');    
    // Выводим окно
    function showContent(elem){
    	hideContent();
    	elem.find('.content').addClass('expanded');
    	elem.addClass('cover');	
    }
    // Сбрасываем все
    function hideContent(){
    	$('.menu .content').removeClass('expanded');
    	$('.menu li').removeClass('cover');    
    }
    
    // Когда элемент li нажат, выводим окно с его содержанием и позиционируем поверх всего
    $('.menu li').click(function() {
    	showContent($(this));
    });    
    // Содержание будет также выводиться с помощью нажатия клавиши ENTER
    $('.menu li').keypress(function(e) {
    	if (e.keyCode == 13) { 
        showContent($(this));
    	}
    });

    // Когда нажат верхний правый элемент, сбрасываем все
    $('.menu .close').click(function(e) {
    	e.stopPropagation();
    	hideContent();
    });    
    // Также сброс происходит по нахатию клавиши ESC
    $(document).keyup(function(e) {
    	if (e.keyCode == 27) { 
    	  hideContent();
    	}
    });
    
	  })();
	</script>