La idea es que el usuario pueda descargar el archivo haciendo clic en descargar o verlo como png en el navegador haciendo clic en abrir/mostrar/lo que sea.
Utilicé una solución que se encuentra aquí para lograr una función div de alternar entre mostrar/ocultar. Funcionó perfectamente para un elemento de la lista, pero estoy tratando de encontrar una manera de usar esto con una lista de unas 30 entradas. Sé que podría simplemente copiar y pegar el código y crear nuevas clases para los divs y anclas, pero seguramente hay una mejor manera. Soy nuevo en el desarrollo web, así que pido disculpas si la solución es obvia.
Aquí hay un ejemplo. Quiero que cada entrada controle su propia alternancia div (haga clic en abrir).
$('.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
Gracias por adelantado.
Para hacer lo que necesita, puede usar los métodos transversales DOM de jQuery, como closest() y find() , para relacionar el elemento que generó el evento de click con aquellos a su alrededor que desea afectar.
También tenga en cuenta que su HTML no es válido. ul solo puede contener elementos li , no div , por lo que debe cambiar la estructura ligeramente.
Dicho esto, prueba esto:
$('.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>También tenga en cuenta que actualicé la demostración para usar jQuery v3.6.0, ya que 2.1.4 está muy desactualizado.