3

Hola tengo este script el cual funciona muy bien, pero ¿Cómo haría para que su función la haga horizontalmente? me refiero que no se esconda de abajo para arriba si no que se esconda de derecha a izquierda.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="button8" name="nueva_cabana"  id="nueva_cabana" value="Mostrar"/>
<script>
$(document).ready(function() {
//$('#anadir_cabana').hide();
$("#nueva_cabana").val('Ocultar');
$("#nueva_cabana").on("click", function(e) {
  var $boton = $(this);
  $('#anadir_cabana').toggle(500, function() {
    $boton.val($(this).is(':visible') ? 'Ocultar' : 'Mostrar');
  });
  e.preventDefault();
});
});
</script>
<div id="anadir_cabana">ESTE ES EL CONTENIDO!!!</div>

1 respuesta 1

2

Te sugiero que uses .animate() y que uses un contenedor para envolver el contenido. Se veria algo asi:

#anadir_cabana {
  width:200px;
  overflow: hidden;
}
#text{
 width:200px;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="button8" name="nueva_cabana" id="nueva_cabana" value="Mostrar"/>
<script>
  $(document).ready(function() {
    //$('#anadir_cabana').hide();
    $("#nueva_cabana").val('Ocultar');
    $("#nueva_cabana").on("click", function(e) {
      var $boton = $(this);
      $('#anadir_cabana').animate({width: [ "toggle", "swing" ]}, 500, function() {
        $boton.val($(this).is(':visible') ? 'Ocultar' : 'Mostrar');
      });
      e.preventDefault();
    });
  });
</script>
<div id="anadir_cabana"><div id="text">ESTE ES EL CONTENIDO!!!</div></div>

1
  • Muy bien amigo me sirvio, como haria para que se oculte al contrario de izquierda a derecha
    – jkjul
    Commented el 22 ago. 2018 a las 22:23

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.