List with toggle div show/hide

Question

The idea is that the user can either download the file by clicking download or view it as a png in browser by clicking open/show/whatever.

I used a solution found on here to achieve a show/hide toggle div function. It worked perfectly for one list item, but I'm trying to find a way to use this with a list of about 30 entries. I know I could just copy and paste the code and make new classes for the divs and anchors but surely there's a better way. I'm new to web development so I apologise if the solution is an obvious one.

Here is an example. I want each entry to control it's own div toggle (click on open).

$('.list-link').click(function() {
  $('.test-div').show(500);
  $('.list-link').hide(0);
  $('.Hide').show(0);
});

$('.Hide').click(function() {
  $('.test-div').hide(500);
  $('.list-link').show(0);
  $('.Hide').hide(0);
});

.list-entry {
  background-color: darkgrey;
  width: 200px;
  margin-bottom: 10px;
  list-style: none;
}

.test-div {
  width: 200px;
  height: 100px;
  background-color: blue;
  display: none;
}

.Hide {
  display: none;
}

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

<ul class="list">
  <li class="list-entry">
    <p> test 1</p>
    <div class="links">
      <a class="download-link" href="">download</a>
      <a class="list-link">open</a>
      <a class="Hide">hide</a>
  </li>
  <div class="test-div"></div>
  <li class="list-entry">
    <p> test 2</p>
    <div class="links">
      <a class="download-link" href="">download</a>
      <a class="list-link">open</a>
      <a class="Hide">hide</a>
    </div>
  </li>
  <div class="test-div"></div>
  <li class="list-entry">
    <p> test 3</p>
    <div class="links">
      <a class="download-link" href="">download</a>
      <a class="list-link">open</a>
      <a class="Hide">hide</a>
    </div>
  </li>
  <div class="test-div"></div>
</ul>

https://codepen.io/pen/RwgaxRQ

Thanks in advance.

Answer 1

To do what you require you can use jQuery's DOM traversal methods, such as closest() and find(), to relate the element that raised the click event to those around it which you want to affect.

Also note that your HTML is invalid. ul can only contain li elements, not div, so you need to change the structure slightly.

With that said, try this:

$('.list-link').click(function() {
  let $li = $(this).closest('li');
  $li.find('.test-div').show(500);
  $li.find('.list-link').hide();
  $li.find('.Hide').show();
});

$('.Hide').click(function() {
  let $li = $(this).closest('li');
  $li.find('.test-div').hide(500);
  $li.find('.list-link').show();
  $li.find('.Hide').hide();
});

.list-entry {
  background-color: darkgrey;
  width: 200px;
  margin-bottom: 10px;
  list-style: none;
}

.test-div {
  width: 200px;
  height: 100px;
  background-color: blue;
  display: none;
}

.Hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="list">
  <li class="list-entry">
    <p> test 1</p>
    <div class="links">
      <a class="download-link" href="">download</a>
      <a class="list-link">open</a>
      <a class="Hide">hide</a>
    </div>
    <div class="test-div"></div>
  </li>
  <li class="list-entry">
    <p> test 2</p>
    <div class="links">
      <a class="download-link" href="">download</a>
      <a class="list-link">open</a>
      <a class="Hide">hide</a>
    </div>
    <div class="test-div"></div>
  </li>
  <li class="list-entry">
    <p> test 3</p>
    <div class="links">
      <a class="download-link" href="">download</a>
      <a class="list-link">open</a>
      <a class="Hide">hide</a>
    </div>
    <div class="test-div"></div>
  </li>
</ul>

Also note that I updated the demo to use jQuery v3.6.0, as 2.1.4 is very outdated.