when you click on a div, a block with text should appear and the picture in this div should change. Such div 3 pieces and in the pictures inside the same class, how to make so that only that picture on which parental block was clicked changes. There is such a jquery sketch, the text comes up and the picture does not change:

function diplay_hide(blockId) { if ($(blockId).css('display') == 'none') { $(blockId).animate({ height: 'show' }, 500); $('this.arrow').attr("src", "images/up-arrow.png"); } else { $(blockId).animate({ height: 'hide' }, 500); } } 
 <div class="span left" onclick="diplay_hide('#hidden_block');return false;"> <img src="images/photo.png" class="photo left" alt=""> <p class="px14">PHOTOGRAPHY</p> <label class="right" for="toggle"> <img src="images/down-arrow.png" class="arrow" alt=""> </label> <div class="hidden-text px14 grey" id="hidden_block"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </div> </div>

    1 answer 1

    Works with this finds classes only in the block they clicked on.

      function diplay_hide(blockId) { if ($(blockId).children('.hidden_block').css('display') == 'none') { $(blockId).children('.hidden_block').animate({ height: 'show' }, 500); $(blockId).parent().find('.photo').css('display','block'); $(blockId).children('.arrow').attr("src", "images/up-arrow.png"); } else { $(blockId).children('.hidden_block').animate({ height: 'hide' }, 500); $(blockId).parent().find('.photo').css('display','none'); } } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="span left" onclick="diplay_hide(this);return false;"> <img src="https://thumb1.shutterstock.com/display_pic_with_logo/289333/349563746/stock-photo-best-internet-concept-of-global-business-from-concepts-series-elements-of-this-image-furnished-by-349563746.jpg" class="photo left" alt=""> <p class="px14">PHOTOGRAPHY</p> <label class="right" for="toggle"> <img src="images/down-arrow.png" class="arrow" alt=""> </label> <div class="hidden_block hidden-text px14 grey"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </div> </div>

    • replace id="hidden_block" with class - Igor
    • replaced thanks - L. Vadim