如何使内容基于点击显示和隐藏内容

Question

I have a gallery of images and I'm trying to have it so when an image is clicked it displays different content in a div.

But I have no idea how to do this & struggling to find resources to help.

JSFiddle with styling

<div id="user-list">
  <div id="users">
    <img src="https://picsum.photos/200?image=1058" alt="User 1" class="user">
    <img src="https://picsum.photos/200?image=1062" alt="User 2" class="user">
    <img src="https://picsum.photos/200?image=1055" alt="User 3" class="user">
    <img src="https://picsum.photos/200?image=1045" alt="User 4" class="user">
    <img src="https://picsum.photos/200?image=1041" alt="User 5" class="user">
  </div>

  <div id="user-info">
    <img src="https://picsum.photos/300?image=1042" alt="User">
    <h3 class="title">Username</h3>
    <div class="btn-area">
      <a href="#" id="btn-1">BTN 1</a>
      <a href="#" id="btn-2">BTN 2</a>
      <a href="#" id="btn-3">BTN 3</a>
    </div>
    <div id="user-stats">
      <h4>Stat 1</h4>
      <p>1024</p>
      <h4>Stat 2</h4>
      <p>50%</p>
    </div>
  </div>
</div>

Answer 1

Using jQuery you can get src of clicked tag and put it inside src of the element you want like this :

$(".user").click(function(){
    $("#user-info img").attr('src',  $(this).attr('src'));
})

https://jsfiddle.net/rezaxdi/qycz5rh1

You can do the same for any other content you want, for example hiding and showing contents based on clicked element alt attribute (just added user-1 and user-2 classes to some elements):

$(".user").click(function(){
    $("#user-info img").attr('src',  $(this).attr('src'));
  if($(this).attr('alt') == "User 1" || $(this).attr('alt') == "User 2"){
    $(".user-1").show();
    $(".user-2").hide();
  }
  else if($(this).attr('alt') == "User 3" || $(this).attr('alt') == "User 4"){
    $(".user-1").hide();
    $(".user-2").show();
  }
  else{
    $(".user-1").show();
    $(".user-2").show();
  }
})

https://jsfiddle.net/rezaxdi/g0vbdzmc