0

Estoy intentando hacer una especie de "cortina" - Un div que muestra un contenido oculto al ser pulsado - y no consigo hacer cambiar el contenido que tiene ese mismo div con jQuery

Aquí os dejo el código que tengo actualmente (sin nada que me cambie el div)

$(document).ready(function() {
  $("#button-show-hide-c3").click(function() {
    $("#show-hide-c3").slideToggle();

  });



});
.text-center {
  text-align: center;
}

#show-hide-c3 {
  display: none;
}

.button-styled {
  width: 95%;
  margin: 20px;
  display: table;
  padding: 20px 0;
  background-color: cadetblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column-hard3">
  <div class="container-title-dropdown">
    <h1 class="text-center">Suports de Fixació</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo id ligula id iaculis. Donec vehicula, enim eu semper ultricies, velit nulla placerat orci, vel ultricies est erat sed velit.</p>

  </div>
  <div id="show-hide-c3">
    <div class="container-hardware">
      <div class="margin-container-hardware">
        <div class="part1">
          <a href="_hardware_soportesfijacion-.html">
            <div class="container-go-specs">
              <div class="go-specs-img sup-img"><img src="_style/images/soportes.png" class="zoom" alt="Suports"></div>
              <div class="go-specs">
                <p class="go-specs-text">Més informació</p>
              </div>

            </div>
          </a>

        </div>

        <div class="part2">
          <p>Per als dispositius que han de funcionar en un mostrador de venda o en un passadís de sortida. Allarga la vida del dispositiu...</p>

        </div>

      </div>
    </div>
  </div>
  <div class="button-styled text-center" id="button-show-hide-c3">Mostrar més</div>

</div>

</div>

Entonces, necesito que en cuanto el div llega a su posición final, es decir, cuando ya ha mostrado todo el contenido oculto cambie a "Mostrar menos" y que cuando le vuelva a pulsar y quede arriba del todo siga saliendo el texto original de "Mostrar més".

He estado buscando también cómo hacerlo en la página de StackOverflow que hay en inglés pero no he sabido implementarlo en mi código.

Muchas gracias de antemano.

2 respuestas 2

2

Al método slideToggle() puedes pasarle una función callback que se va a ejecutar tras terminar la ejecución de dicho slideToggle(). En ese callback le puedes definir el cambio del texto haciendo $("#show-hide-c3").html("Mostrar menos");, sin embargo, lo ideal es que tu función se mantenga pura y que el cambio se haga en función a una referencia y no al elemento en concreto. Por eso, lo ideal es que hagas referencia a this.

Para ello tienes dos opciones:

  1. Usar una arrow function:

Las funciones flecha no asignan el contexto de ejecución a this por lo que, en el ejemplo que te pongo, this no estaría haciendo referencia al contexto de la función slideToggle() sino que estaría haciendo referencia al elemento $("#show-hide-c3"), por lo que podrías hacer $(this).html("Mostrar menos") y se cambiaría el texto.

$(document).ready(function() {
  $("#button-show-hide-c3").click(function() {
    let flag = $("#show-hide-c3").is(":hidden");
    $("#show-hide-c3").slideToggle('slow', ()=>{
      if(!flag)
        $(this).html("Mostrar més")
      else
        $(this).html("Mostrar menos")
    });
    
  });
});
.text-center {
  text-align: center;
}

#show-hide-c3 {
  display: none;
}

.button-styled {
  width: 95%;
  margin: 20px;
  display: table;
  padding: 20px 0;
  background-color: cadetblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column-hard3">
  <div class="container-title-dropdown">
    <h1 class="text-center">Suports de Fixació</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo id ligula id iaculis. Donec vehicula, enim eu semper ultricies, velit nulla placerat orci, vel ultricies est erat sed velit.</p>

  </div>
  <div id="show-hide-c3">
    <div class="container-hardware">
      <div class="margin-container-hardware">
        <div class="part1">
          <a href="_hardware_soportesfijacion-.html">
            <div class="container-go-specs">
              <div class="go-specs-img sup-img"><img src="_style/images/soportes.png" class="zoom" alt="Suports"></div>
              <div class="go-specs">
                <p class="go-specs-text">Més informació</p>
              </div>

            </div>
          </a>

        </div>

        <div class="part2">
          <p>Per als dispositius que han de funcionar en un mostrador de venda o en un passadís de sortida. Allarga la vida del dispositiu...</p>

        </div>

      </div>
    </div>
  </div>
  <div class="button-styled text-center" id="button-show-hide-c3">Mostrar més</div>

</div>

</div>

  1. Guardar this antes de llamar a slideToggle():

Así te aseguras que, dentro del slideToggle(), this hace referencia al elemento:

$(document).ready(function() {
  $("#button-show-hide-c3").click(function() {
    var that = $(this);
    let flag = $("#show-hide-c3").is(":hidden");
    $("#show-hide-c3").slideToggle('slow', function(){
    if(flag)
      $(that).html("Mostrar menos");
    else
      $(that).html("Mostrar més");
    }
    );
  });
});
.text-center {
  text-align: center;
}

#show-hide-c3 {
  display: none;
}

.button-styled {
  width: 95%;
  margin: 20px;
  display: table;
  padding: 20px 0;
  background-color: cadetblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column-hard3">
  <div class="container-title-dropdown">
    <h1 class="text-center">Suports de Fixació</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo id ligula id iaculis. Donec vehicula, enim eu semper ultricies, velit nulla placerat orci, vel ultricies est erat sed velit.</p>

  </div>
  <div id="show-hide-c3">
    <div class="container-hardware">
      <div class="margin-container-hardware">
        <div class="part1">
          <a href="_hardware_soportesfijacion-.html">
            <div class="container-go-specs">
              <div class="go-specs-img sup-img"><img src="_style/images/soportes.png" class="zoom" alt="Suports"></div>
              <div class="go-specs">
                <p class="go-specs-text">Més informació</p>
              </div>

            </div>
          </a>

        </div>

        <div class="part2">
          <p>Per als dispositius que han de funcionar en un mostrador de venda o en un passadís de sortida. Allarga la vida del dispositiu...</p>

        </div>

      </div>
    </div>
  </div>
  <div class="button-styled text-center" id="button-show-hide-c3">Mostrar més</div>

</div>

</div>

Personalmente, la primera opción (utilizando funciones flecha) me parece la más limpia y la que mejor te ayuda a controlar tu código.

EDITO: He añadido un flag para saber si el div está desplegado o no y cambiar el valor del texto en función de cómo esté.

1
  • Buah, por fin! Muchísimas gracias. Había estado intentando aplicar soluciones de otras preguntas, pero se me superponían los textos, o no me funcionaba la función.
    – Yuna Sch
    el 15 abr. 2019 a las 9:52
0

a .slideToggle() le puedes pasar como argumento la función que quieres que se ejecute cuando se complete, puedes consultarlo en la docu de JQuery: Documentación JQuery

Además, aquí te dejo otro link con la implementación de otro compañero de Stackoverflow EN: Stackoverflow

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.