It is necessary that when you click on img2, instead of block-1, a hidden block-5 will appear. We need advice or real help, because the head does not cook at all. Thank. 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(); });
  • Where is your html part of .img2 ? what should we click on? - xaja
  • Sorry not the code I threw, now I'll fix it - sagan

1 answer 1

And where is your class img2 and, actually, block-2 ? Here is the corrected version:

 $(document).ready(function() { $(".img2").on("click", function(){ if ($('.block-1').css("display") == "inline-block") { $('.block-1').hide(); $('.block-5').css("display", "inline-block"); } else { $('.block-5').hide(); $('.block-1').css("display", "inline-block"); } }); }); 
 .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: none; height: auto; margin: 10px 3% 10px 0; padding: 0 10px; } 
 <div class="wrapp"> <div class="block-1"> <a href="#"><img src="img.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-5"> <a href="#"><img src="http://1.bp.blogspot.com/-0Q3kCnPUmdw/UzBjhXx60yI/AAAAAAABk3k/SkhejnRSiD4/s1600/Emoticons%20Sonrientes%2010.jpg" alt="img5"></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 class="block-2"> <a href="#"><img class="img2" src="http://liubavyshka.ru/_ph/104/2/900525914.png" 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> </div> </div>

  • it is necessary that the hidden block-5 becomes in place of block-1, and now the second instead of the first is sagan
  • one
    Put block-5 after block-1. It is still hidden and will not be displayed in the markup. Or do you care that he moves from the end to the beginning? - Max.
  • No, it does not matter, but if you do as you say, then the second one falls down, but must remain in place ... - sagan
  • one
    Try it now. Changed html and js - Max
  • one
    When clicking on a picture, check by condition the first block is hidden (or the fifth one) or not, and then the fifth one (or the first one) is displayed. - Max