How can I do a function if the customer clicks on the image of the left column it opens in the right div?

Question

I have to do the following project of the first image, will show a column of properties(houses) and when I click one on the right 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 right away by the dusty part (screen 2), in image 2 is already the project more or less, how can I do for when the client click on the photo of the first column the same click on the div with the larger image (column to the right)? And I’m doing it the right way? Can you do it on the same page of the client by clicking on full info and I just make the column bigger? Sorry for the inconvenience I am intern kkk, follow the code below the image, 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>

Answer 1

Anderson, your question is a little hard to understand. From what I understand, Oce wants the house that Oce clicks on a menu to appear in larger size on the other side of the screen, correct?

Well, I used jQuery to grab the image click event, find the src and assign the larger tag. In addition, the menu will contain a label field containing the details that Voce wants to display when clicking on the button "Info"

$(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(){
$('.venda img').click(function(){
$('.image-house img').attr('src',$(this).attr('src'));
  });
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="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">
          <label class="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">
             <label class="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>