Expand div

by tanaan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<body>
	<div class="container">
		<ul>
			<li class="grid" data-content="#project1">
				<div class="containerGrid">
					<h2>Title grid</h2>
				</div>
				<div id="project1" class="workContent">
					<p>Content 1</p>
				</div>
			</li>
			<li class="grid" data-content="#project2">
				<div class="containerGrid">
					<h2>Title grid</h2>
				</div>
				<div id="project2" class="workContent">
					<p>Content 2</p>
				</div>
			</li>
			<li class="grid" data-content="#project3">
				<div class="containerGrid">
					<h2>Title grid</h2>
				</div>
				<div id="project3" class="workContent">
					<p>Content 3</p>
				</div>
			</li>
			<li class="grid" data-content="#project4">
				<div class="containerGrid">
					<h2>Title grid</h2>
				</div>
				<div id="project4" class="workContent">
					<p>Content 4</p>
				</div>
			</li>
			<li class="grid" data-content="#project5">
				<div class="containerGrid">
					<h2>Title grid</h2>
				</div>
				<div id="project5" class="workContent">
					<p>Content 5</p>
				</div>
			</li>
			<li class="grid" data-content="#project6">
				<div class="containerGrid">
					<h2>Title grid</h2>
				</div>
				<div id="project6" class="workContent">
					<p>Content 6</p>
				</div>
			</li>
			<li class="grid" data-content="#project7">
				<div class="containerGrid">
					<h2>Title grid</h2>
				</div>
				<div id="project7" class="workContent">
					<p>Content 7</p>
				</div>
			</li>

		</ul>

	</div><!-- end container -->
</body>
</html>

CSS

body{
		margin: 0;
		padding: 0;
	}

	.container{
		border: 1px solid #ff0000;
		margin: 0;
		padding: 0;
	}

	ul{
		padding: 0;
		margin: 0;
	}

	li.grid{
		display: inline-block;
    	margin: 0;
    	padding: 0;
    	width: 20%;
    	height: 200px;
    	float: left;
    	vertical-align: top;
    	background-color: #00ff24;
	}

	li.grid:hover{
    	background-color: #99f4a6;
	}

	.containerGrid{
		width: 100%;
		height: 200px;
	}

	.containerGrid h2{
		padding: 0;
		margin: 0;
	}

	.workContent{
		height: 500px;
		border: 1px solid #000;
		width: 100%;
    position: absolute;
    left: 0;
	}

JavaScript

$(document).ready(function(){

			$('.workContent').hide();

			$('.containerGrid').click(function(){

				$('.workContent').hide();
				var idProject = $(this).parent().attr('data-content');
	        	$(idProject).show();

			});

		});