0

Estoy usando la libreria Jquery UI acordeon y quisiera saber como hacer cuando de click a una sección se agregue su contenido dinamicamente a la url como muestro en el ejemplo de abajo.

introducir la descripción de la imagen aquí

Este es el ejemplo que probe de Jquery UI, como podria agregarlo al url?

introducir la descripción de la imagen aquí

Este es el código en mi index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Accordion - Collapse content</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>    
</head>

<body>
    <div class="container">
        <div id="accordion">
            <h3>Section 1</h3>
            <div>
                <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi
                    metus,
                    molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin
                    viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
            </div>
            <h3>Section 2</h3>
            <div>
                <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor
                    at
                    aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus
                    non
                    quam. In suscipit faucibus urna. </p>
            </div>
            <h3>Section 3</h3>
            <div>
                <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque
                    purus
                    in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed
                    commodo,
                    magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
                <ul>
                    <li>List item one</li>
                    <li>List item two</li>
                    <li>List item three</li>
                </ul>
            </div>
            <h3>Section 4</h3>
            <div>
                <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                    egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
                    Aenean
                    lacinia mauris vel est. </p>
                <p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti
                    sociosqu
                    ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
            </div>
        </div>
    </div>
</body>
<script>
        $(function () {
            $("#accordion").accordion({
                collapsible: true
            });
        });
    </script>
</html>

En la seccion de script utilizo la funcion accordion para poder usar la funcionalidad, pero quisiera que cuando se ejecute su accion el contenido se agregue a la url.

Por ejemplo SECCION 1, se agregue a la url como un concatenado y quede asi localhost/acordeon/index.html#Section01 y cuando de click a la siguiente seccion del acordeon localhost/acordeon/index.html#Section02

Espero puedan ayudarme gracias.

<script>
            $(function () {
                $("#accordion").accordion({
                    collapsible: true
                });
            });
        </script>
2
  • 1
    No entiendo que quieres decir con el contenido se agregue a la url. ???
    – Yussef
    Commented el 3 jul. 2023 a las 16:58
  • Disculpa si no me explique bien, lo que estoy tratando de hacer es que cuando de click a una seccion del acordeon su titulo por ejemplo SECCION 1, se agregue a la url como un concatenado y quede asi localhost/acordeon/index.html#Section01 y cuando de click a la siguiente seccion del acordeon localhost/acordeon/index.html#Section02, como podria enviarlo a la url para que el usuario sepa donde se encuentra. porfas si pudieras ayudarme Commented el 3 jul. 2023 a las 17:01

1 respuesta 1

1

He preparado un ejemplo funcional con lo que quieres:

Los aspectos esenciales son:

  • Crear anchors reales dentro de los elementos que se utilizan para crear los encabezados del acordión, de manera que podamos hacer referencia a ellos en el código. Para poder identificarlos les he añadido la clase accordionLink.
  • Crear una clase que me permita también identificar los elementos que se usan como títulos en el acordión, para ello he utilizado accordionTitle.
  • Dado que los títulos se llaman "Sección 1", "Sección 2", etc, he utilizado como nombres "s1", "s2", etc.
  • Esta numeración me permite relacionar de una manera sencilla los anchors que van a aparecer en el hash de la URL con el índice de los elementos del acordión. Si no se utiliza una numeración, habría que encontrar otra manera de relacionarlos.
  • No es solo de añadir un hash a la URL cada vez que se haga clic en un título del acordión, para una funcionalidad completa hay que cubrir los casos en que se lance la página utilizando un hash como parte de la URL y la navegación por el historial (con el botón de retroceso, etc).
  • Para el manejo de hash en la barra de direcciones he creado una función llamada aplicarHash que se usa en los casos en que se cargue la página con un hash desde el inicio y que se escriba un hash en la dirección ya con la página cargada.
  • Para el manejo del historial, voy almacenando un objeto state que tiene el nombre del anchor cada vez que se hace clic en el título del acordión, e implemento el evento popstate del historial, dónde utilizo esa información para expandir el elemento del hash que se está visitando.
  • Finalmente, para cambiar la dirección, me valgo de hacer una llamada a history.pushState() en un manejador de evento click añadido a cada .acordionTitle.

Dejo un snippet para que la pregunta esté completa, aunque como está dentro del sandbox, no se pueden ver el funcionamiento del historial y del hash como tal, pero he subido también un ejemplo completo a mi github que se puede navegar en github pages: Ejemplo de acordión con hash

let acordion;
  
function aplicarHash() {
  if (window.location.hash) {
    let hash = window.location.hash.substring(1);
    let numero = ~~hash.substring(1) - 1;
    acordion.accordion("option", "active", numero);
  }
}
  
$(function () {
  acordion = $("#accordion").accordion({collapsible: true});
  aplicarHash();
  $(".accordionTitle").click(function(event){ 
    let anchor = $(this).find(".accordionLink")[0];
    let state = {};
    state.name = anchor.name;
    history.pushState(state, undefined, "#" + anchor.name); 
  });
});
  
window.addEventListener('popstate', event => {
  const state = event.state;
  if (state) {
    let numero = ~~state.name.substring(1) - 1;
    acordion.accordion("option", "active", numero);
  }
});
  
window.addEventListener("hashchange", (event) => {
  aplicarHash();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<div class="container">
  <div id="accordion">
    <h3 class="accordionTitle"><a class="accordionLink" name="s1">Section 1</a></h3>
    <div>
      <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi
        metus,
        molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin
        viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    </div>
    <h3 class="accordionTitle"><a class="accordionLink" name="s2">Section 2</a></h3>
    <div>
      <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor
        at
        aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus
        non
        quam. In suscipit faucibus urna. </p>
    </div>
    <h3 class="accordionTitle"><a class="accordionLink" name="s3">Section 3</a></h3>
    <div>
      <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque
         purus
         in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed
         commodo,
         magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
      <ul>
         <li>List item one</li>
         <li>List item two</li>
         <li>List item three</li>
      </ul>
    </div>
    <h3 class="accordionTitle"><a class="accordionLink" name="s4">Section 4</a></h3>
    <div>
      <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
        egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Aenean
        lacinia mauris vel est. </p>
      <p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti
        sociosqu
        ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
    </div>
  </div>
</div>

No me extiendo en la explicación para no dejar una respuesta demasiado larga. Creo que el código se auto-explica, pero si tienes dudas, no dudes en dejar un comentario.

Advertencia: el código es un ejemplo que se ha escrito con fines educativos, no considero que esté listo para ponerlo en producción, por ejemplo, fallará si se escribe un hash que se sale del esquema s1, s2, etc.

Queda como ejercicio para el interesado cubrir esos casos y probarlo antes de ponerlo en una página real.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.