expand details

HTML

<div class="detail hide"></div>

<ul class="results">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<ul class="results">
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>
<ul class="results">
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>

CSS

.results {
	  background-color: yellow;
	  margin: 0;
	  padding: 0;
	  position:relative;
	  height:auto;
	  overflow: visible;
	  width:652px;
	  display:block;
	  list-style: none;
	}
	.results li {
	  background-color:red;
	  padding: 0;
	  width:200px;
	  height:140px;
	  display:inline-block;
	  margin:7px;
	  list-style-type: none;
	  cursor:pointer;
	  -webkit-transition: all .5s linear;
	  -moz-transition: all .5s linear;
	  -ms-transition: all .5s linear;
	  -o-transition: all .5s linear;
	  transition: all .5s linear;
	}
	.detail {
	  background-color:orange;
	  padding: 7px;
	  width:624px;
	  position:relative;
	  top:7;
	  visibility:visible;
	  left:auto;
	  opacity: 1;
	  margin:0 7px 7px 7px;
	  cursor:pointer;
	  -webkit-transition: all .5s ease-out;
	  -moz-transition: all .5s ease-out;
	  -ms-transition: all .5s ease-out;
	  -o-transition: all .5s ease-out;
	  transition: all .5s ease-out;
	}
	.hide {
	  visibility:hidden;
	  opacity: 0;
	  position:absolute;
	}
	.fade {
	  opacity: .2;
	}

JavaScript

$(document).ready(function () {
  var $getDetails = $('.results div'),
    $getLis = $('.results li');
  $('.results').on('click', 'li', function () {
    $getLis.removeClass('fade');
    $getDetails.addClass('hide').empty();
    $('.detail')
      .html($(this).html())
      .addClass('hide')
      .removeClass('hide');
    $(this).addClass('fade');
  });
  $('.results').on('click', '.detail', function () {
    $getDetails.addClass('hide').empty();
    $getLis.removeClass('fade');
  });
});