Необходимо что бы при клике по img2, вместо block-1 появлялся скрытый блок block-5. Нужен совет или реальная помощь, ибо голова уже вообще не варит. Спасибо.jsfidle
<div class="wrapp">
<div class="block-1">
<a class="img1" href="#"><img src="img1.jpg" alt="img1"></a>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia error vero voluptatibus optio qui ea eaque, delectus ad velit tenetur deleniti eum quia fugiat, magni recusandae esse, enim atque nam?</p>
</div>
<div class="block-2">
<a class="img2" href="#"><img src="img2.jpg" alt="img2"></a>
<h2>Ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam inventore modi dolorum voluptatum tempore consequatur molestiae id optio expedita aliquid amet, praesentium excepturi quod</p>
</div>
<div class="block-3">
<a href="#"><img src="img.jpg" alt="img3"></a>
<h2>Consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi quia asperiores sint, rem minus esse rerum ullam expedita exercitationem voluptates culpa soluta quidem atque neque cumque inventore at dicta aperiam.</p>
</div>
<div class="block-4">
<a href="#"><img src="img.jpg" alt="img4"></a>
<h2>Repellat dolore</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat dolore temporibus enim perferendis modi officia soluta, quis, optio voluptatibus dolorum vitae in dolor obcaecati vel laborum facere, ea doloribus asperiores!</p>
</div>
.wrapp{
width: 100%;
margin: 0 auto;
}
.block-1, .block-2, .block-3, .block-4{
width: 43%;
border: 1px solid red;
display: inline-block;
height: auto;
margin: 10px 3% 10px 0;
padding: 0 10px;
}
.block-2{
border: 1px solid green;
}
.block-3{
border: 1px solid blue;
}
.block-4{
border: 1px solid yellow;
}
h2{
text-align: center;
}
/*скрытый блок
.block-5{
width: 43%;
border: 1px solid black;
display: inline-block;
height: auto;
margin: 10px 3% 10px 0;
padding: 0 10px;
}*/
jQuery:
$('.img2').click({
$('.block-1').hide();
$('.block-5').show();
});
.img2
? по чему мы должны кликать?