Tengo varios hrefs que deben vincularse al acordeón adecuado en la parte inferior de la página. El código que tengo ahora funciona, sin embargo, estoy tratando de minimizar la cantidad de veces que repito las funciones, ya que un compañero de trabajo señala que no son prácticas. He probado la solución location.hash, pero no me funciona. Cualquier idea sería apreciada.
window.contentAssetInitFunctions.push(function() { $(document).ready(function() { $("#start").click(function() { $('#startExchange, #startHeader').addClass('active'); $('#packingSlip, #packingHeader').removeClass('active'); }); $("#pack").click(function() { $('#packingSlip, #packingHeader').addClass('active'); $('#startExchange, #startHeader').removeClass('active'); }); }); }); <a href="#startHeader" id="start" class="text-link">Learn How</a> <a href="#packingHeader" id="pack" class="text-link">Learn How</a> <a class="question" id="startHeader"> EXCHANGE</a> <div class="answer" id="startExchange"> content </div> <a class="question" id="packingHeader">HOW TO START AN EXCHANGE WITH A PACKING SLIP</a> <div class="answer" id="packingSlip"> content </div>Si envuelve cada pregunta/respuesta con una etiqueta de contenedor (como un article o div ), entonces puede orientar la sección completa en lugar de tener que elegir la pregunta y la respuesta con sus identificaciones personalizadas.
A continuación, verá que agregué una etiqueta de article de envoltorio con una identificación que describe la sección. Luego, el javascript elimina todas las etiquetas activas y luego toma la id de href , encuentra ese article y agrega una etiqueta activa a ese.
Algo como esto:
$(document).ready(function () { $(".text-link").click(function () { let section = $(this).attr('href').substr(1); $('article .question, article .answer').removeClass('active') $(`#${section} .question, #${section} .answer`).addClass('active') }); }); <a href="#start" class="text-link">Learn How</a> <a href="#packing" class="text-link">Learn How</a> <article id="start"> <a class="question"> EXCHANGE</a> <div class="answer"> content </div> </article> <article id="packing"> <a class="question">HOW TO START AN EXCHANGE WITH A PACKING SLIP</a> <div class="answer"> content </div> </article>