How can I make a function for if the client clicks the image of the left column it opens in the right div?

Navigation
1

I have to do the following project of the first image, it will show a column of properties (houses) and when I click on one on the right it will show the description of the house ... if I want to see more detailed click on full info and the column that was only one will turn 2 and instead of showing the available houses will show the images of the house clicked ... I decided to start doing it soon by the part espandida (screen 2), in image 2 is the project more or less, how can I do when the client clicks the photo of the first column to load the same with the larger image (right column )? And am I doing it right? how can I do this on the same page of the client click full info and I just make the column get bigger? Sorry for the inconvenience I'm trainee kkk, follow the code below the image, do I have to do this using js? 

body{
	padding: 0;
	margin: 0;
}

#ofertas{
	float:left;
	height: 513px;
	background-color:  #EEE9E9;
	position: relative;
	overflow-y: scroll;
	margin-left: 3%;
	width: 36%;
}

#ofertas ul li {
	list-style: none;
	display: inline-block;
}



.margin-oferta{
	position: relative;
	display: inline-block;
	width:163px;
	height: 169px;
	padding: 0;
	margin: 2% auto;
	margin-left: 5%;
}

.margin-oferta h4{
	margin-bottom: 0;
}
.venda{
	position: relative;
	height: 150px;
	width: 163px;
	background: blue;
	display: inline-block;
	padding: 0;
	margin-top: 0;

	
	}

.venda img{
	width: 163px;
	height: 150px;
}

.bar-right{
	display: block;
	margin-top: 0;
	width: 60%;
	height: auto;
	float: right;

}

.description{
	width: 87%;
	height: auto;
	margin: 1% auto 2%;
	background-color: #EEE9E9;

}

.margin-out{
	margin:0 auto;
	background-color: #EEE9E9;
	height: 420px;
	width: 700px;
}

#preco{

margin-left: 7%; 
margin-bottom: 0;"
}
.image-house{
	position: relative;
	margin: 0 auto;
	height: 370px;
	width: 645px;
}

.image-house img{
	position: relative;
	margin: 3.5% auto;
	height: 370px;
	width: 645px;
}
<div id="ofertas">
		<ul>
		    <div class="margin-oferta">
		    	<h4>Casa 1</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>
			
			<div class="margin-oferta">
		    	<h4>Casa 2</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>
			
			
			<div class="margin-oferta">
		    	<h4>Casa 3</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>

			<div class="margin-oferta">
		    	<h4>Casa 4</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>
			
			<div class="margin-oferta">
		    	<h4>Casa 5</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>

			<div class="margin-oferta">
		    	<h4>Casa 6</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>

			<div class="margin-oferta">
		    	<h4>Casa 7</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>

			<div class="margin-oferta">
		    	<h4>Casa 8</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>
		</ul>
	</div>

	<div class="bar-right">
		<div class="margin-out">
			<div class="image-house">
				<img src="img/avatar4.jpg">
			</div>
		</div>
		<p id="preco">£ 90 0000 </p>
		<div class="description">
			<p>	This house is recommended for those who have a big family. it's very big and handsome<br>
				This house is recommended for those who have a big family. it's very big and handsome<br>
				This house is recommended for those who have a big family. it's very big and handsome<br>
				This house is recommended for those who have a big family. it's very big and handsome</p>

		</div>

	</div>
    
asked by anonymous 31.03.2017 / 17:03

1 answer

1

Anderson, your question is a bit difficult to understand. From what I understand, you want the house you click on a menu to appear in larger size on the other side of the screen, correct?

Well, I used jQuery to grab the click event from the image, find the src, and assign the largest tag. In addition, the menu will contain a label field containing the details you want to display by clicking the "Info" button 

$(document).ready(function(){
$('.venda').click(function(){
  $('.image-house img').attr('src',$(this).find('img').attr('src'));  
$('.description .p-description').text($(this).find('.label-description').text());

  });
  $('#btnInfo').click(function(){
  $('.description').show();
  });
});
body{
	padding: 0;
	margin: 0;
}

#ofertas{
	float:left;
	height: 513px;
	background-color:  #EEE9E9;
	position: relative;
	overflow-y: scroll;
	margin-left: 3%;
	width: 36%;
}

#ofertas ul li {
	list-style: none;
	display: inline-block;
}



.margin-oferta{
	position: relative;
	display: inline-block;
	width:163px;
	height: 169px;
	padding: 0;
	margin: 2% auto;
	margin-left: 5%;
}

.margin-oferta h4{
	margin-bottom: 0;
}
.venda{
	position: relative;
	height: 150px;
	width: 163px;
	background: blue;
	display: inline-block;
	padding: 0;
	margin-top: 0;

	
	}

.venda img{
	width: 163px;
	height: 150px;
}

.bar-right{
	display: block;
	margin-top: 0;
	width: 60%;
	height: auto;
	float: right;

}

.description{
	width: 87%;
	height: auto;
	margin: 1% auto 2%;
	background-color: #EEE9E9;
  display:none;

}

.label-description{
display:none;
}

.p-description{
}

.margin-out{
	margin:0 auto;
	background-color: #EEE9E9;
	height: 420px;
	width: 700px;
}

#preco{

margin-left: 7%; 
margin-bottom: 0;"
}
.image-house{
	position: relative;
	margin: 0 auto;
	height: 370px;
	width: 645px;
}

.image-house img{
	position: relative;
	margin: 3.5% auto;
	height: 370px;
	width: 645px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script><script>$(document).ready(function(){$('.vendaimg').click(function(){$('.image-houseimg').attr('src',$(this).attr('src'));});});</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="ofertas"> <ul> <div class="margin-oferta"> <h4>Casa 1</h4> <div class="venda"> <img src="http://blog.eucontrato.com.br/wp-content/uploads/2016/04/ideia-casa-reforma-fachada-construcao-telhado-platibanda.jpg"><labelclass="label-description">esse texto é o detalhe da casa 1</label> </div> </div> <div class="margin-oferta"> <h4>Casa 2</h4> <div class="venda"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ22cCH-q_nwhbc5CiTPjgQpzoDfxQP7lKnUE_OhoFQG5WzKXrf"><labelclass="label-description">esse texto é o detalhe da casa 2</label> </div> </div> <div class="margin-oferta"> <h4>Casa 3</h4> <div class="venda"> <img src="img/2.jpg"> <label class="label-description">esse texto é o detalhe da casa 3</label> </div> </div> <div class="margin-oferta"> <h4>Casa 4</h4> <div class="venda"> <img src="img/2.jpg"> </div> </div> <div class="margin-oferta"> <h4>Casa 5</h4> <div class="venda"> <img src="img/2.jpg"> </div> </div> <div class="margin-oferta"> <h4>Casa 6</h4> <div class="venda"> <img src="img/2.jpg"> </div> </div> <div class="margin-oferta"> <h4>Casa 7</h4> <div class="venda"> <img src="img/2.jpg"> </div> </div> <div class="margin-oferta"> <h4>Casa 8</h4> <div class="venda"> <img src="img/2.jpg"> </div> </div> </ul> </div> <div class="bar-right"> <div class="margin-out"> <div class="image-house"> <img src="img/avatar4.jpg"> </div> </div> <input id="btnInfo" type="button" value="info"/> <p id="preco">£ 90 0000 </p> <div class="description"> <p class="p-description"> This house is recommended for those who have a big family. it's very big and handsome<br> This house is recommended for those who have a big family. it's very big and handsome<br> This house is recommended for those who have a big family. it's very big and handsome<br> This house is recommended for those who have a big family. it's very big and handsome</p> </div> </div>
    
27.04.2017 / 19:40
Uses Tree line by line Alternative to Sprites Overlapping