How to select different divs with the same jQuery function?

Question

I've been trying to make divs where I show more info when I click on the div, but I also want to do the same thing for different divs that have different info. (like a music discography).

When I click on the div, it works fine, but when I click on all the other divs, they all fire the first jQuery function from the first div only and show the same info as the first div. This is because they're all named the same, I assume. But I was wondering how I could go about firing the same function, but without changing things around too much or making a new function for each div? I'd like to keep my code as DRY as possible.

$(function() {
  $('#about-section').hide();
  $('.description').click(function() {
    $('#about-section') .toggle(1000);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <img class="card-img-top" src="images/album2.jpeg">
    <div class="content">
      <div class="description">
        The First Album[1989]
      </div>
    </div>
    <div id="about-section">
      <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p>
      <p class="album">The First Album[1989]</p>
      <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
      <div id="albumlist">
        <p>Tracklist </p>
        <ol class="albumlist">
          <li>Yes</li>
          <li>No</li>
          <li>Idk</li>
          <li>Can you repeat the question?</li>
        </ol>
      </div>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <img class="card-img-top" src="images/album1.jpg">
  </div>
  <div class="content">
    <div class="description">
      The Second Album[1990]
    </div>
  </div>

</div>


<div class="col-md-4">
  <div class="card mb-5 mb-4 shadow-sm">
    <img class="card-img-top" src="images/town.jpg">
  </div>
  <div class="content">
    <div class="description">The Third Album[1990]</div>
  </div>
</div>

you want to show about-desciption div of each section on clicking corresponding div ? — melvin, Apr 18 '19 at 15:13
Yeah, but I would like to customise each about-description to show something different. — Mel, Apr 18 '19 at 15:15
https://stackoverflow.com/questions/12481439/jquery-this-keyword, if you want to do things with regard to the clicked element, you can use `this` in jquery. Or `event.currentTarget` - https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget if you pass the event into your function — Pete, Apr 18 '19 at 15:16

score 0 · Answer 1 · answered Apr 18 '19 at 15:14

Since your HTML doesn't seem to follow a pattern, you can always use data-attributes and add a class to your "about sections" so they are automatically hidden

$(function() {
  $('.about-data').hide();
  $('.description').click(function() {
    $('.about-data').hide();
    $($(this).data("target_selector")) .toggle(1000);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <img class="card-img-top" src="images/album2.jpeg">
    <div class="content">
      <div data-target_selector="#about-section" class="description">
        The First Album[1989]
      </div>
    </div>
    <div id="about-section" class="about-data">
      <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p>
      <p class="album">The First Album[1989]</p>
      <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
      <div id="albumlist">
        <p>Tracklist </p>
        <ol class="albumlist">
          <li>Yes</li>
          <li>No</li>
          <li>Idk</li>
          <li>Can you repeat the question?</li>
        </ol>
      </div>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <img class="card-img-top" src="images/album1.jpg">
  </div>
  <div class="content">
    <div class="description">
      The Second Album[1990]
    </div>
  </div>

</div>


<div class="col-md-4">
  <div class="card mb-5 mb-4 shadow-sm">
    <img class="card-img-top" src="images/town.jpg">
  </div>
  <div class="content">
    <div class="description">The Third Album[1990]</div>
  </div>
</div>

score 0 · Answer 2 · answered Apr 18 '19 at 15:15

Give your secondary piece a common class.

<div class="card mb-4 shadow-sm">
  <img class="card-img-top" src="images/album2.jpeg">
  <div class="content">
    <div class="description">
      The First Album[1989]
    </div>
  </div>
  <div id="about-section" class="details">
    <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p>
    <p class="album">The First Album[1989]</p>
    <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
    <div id="albumlist">
      <p>Tracklist </p>
      <ol class="albumlist">
        <li>Yes</li>
        <li>No</li>
        <li>Idk</li>
        <li>Can you repeat the question?</li>
      </ol>
    </div>
  </div>
</div>

Then your logic changes to simply...

$(function() {
    $('.details').hide();
    $('.description').click(function() {
        $(this).closest('.card').find('.details').toggle(1000);
    })
})

melvin · Accepted Answer · 2019-04-18T15:25:34.440

change your about-section from id to class . Then your code will be something like this. I have added some content to album 2 and album 3 to test

<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <img class="card-img-top" src="images/album2.jpeg">
    <div class="content">
      <div class="description">
        The First Album[1989]
      </div>
    </div>
    <div class="about-section">
      <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p>
      <p class="album">The First Album[1989]</p>
      <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
      <div id="albumlist">
        <p>Tracklist </p>
        <ol class="albumlist">
          <li>Yes</li>
          <li>No</li>
          <li>Idk</li>
          <li>Can you repeat the question?</li>
        </ol>
      </div>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <img class="card-img-top" src="images/album1.jpg">
  </div>
  <div class="content">
    <div class="description">
      The Second Album[1990]
    </div>
  </div>
  <div class="about-section">
      <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p>
      <p class="album">The Second Album[1989]</p>
      <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
      <div id="albumlist">
        <p>Tracklist </p>
        <ol class="albumlist">
          <li>Yes</li>
          <li>No</li>
          <li>Idk</li>
          <li>Can you repeat the question?</li>
        </ol>
      </div>
    </div>

</div>


<div class="col-md-4">
  <div class="card mb-5 mb-4 shadow-sm">
    <img class="card-img-top" src="images/town.jpg">
  </div>
  <div class="content">
    <div class="description">The Third Album[1990]</div>
  </div>
      <div class="about-section">
      <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p>
      <p class="album">The Third Album[1989]</p>
      <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
      <div id="albumlist">
        <p>Tracklist </p>
        <ol class="albumlist">
          <li>Yes</li>
          <li>No</li>
          <li>Idk</li>
          <li>Can you repeat the question?</li>
        </ol>
      </div>
    </div>
</div>

and in js part, you can write,

$(function() {
  $('.about-section').hide();
  $('.description').click(function() {
    $(this).closest('.content').siblings('.about-section').toggle(1000);
  })
})

Check this fiddle

and if you want other div sections to toggle (hide) when one div is displayed, you can change your js code to

$(function() {
  $('.description').click(function() {
    $('.about-section').hide();
    $(this).closest('.content').siblings('.about-section').toggle(1000);
  })
})

If this works please accept this as answer . Also please upvote my answer for my effort. Happy to help :) — melvin, Apr 18 '19 at 16:09

How to select different divs with the same jQuery function?

3 Answers3