elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Sigue las noticias más importantes de seguridad informática en el Twitter! de elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Div desplegable como hacer para que se vea desplegado
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Div desplegable como hacer para que se vea desplegado  (Leído 1,397 veces)
Alarkon_88

Desconectado Desconectado

Mensajes: 70


Ver Perfil
Div desplegable como hacer para que se vea desplegado
« en: 5 Agosto 2018, 23:40 pm »

Saludos, tengo este script

Código:

<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").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>




el codigo funciona perfectamente cuando yo abro la pagina me sale pero me gustaria hacer que saliera de una ves desplegado de modo que al entrar a la web ya sea visible y salga el boton que diga ocultar en ves de mostrar


« Última modificación: 5 Agosto 2018, 23:45 pm por Alarkon_88 » En línea

EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.042



Ver Perfil
Re: Div desplegable como hacer para que se vea desplegado
« Respuesta #1 en: 6 Agosto 2018, 02:21 am »

Saludos,

- Comenta o elimina la línea que oculta (hide) tu contenido e inicializa el val() del botón a 'Ocultar':

Código
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  2. <input type="button" class="button8" name="nueva_cabana" id="nueva_cabana" value="Mostrar"/>
  3. <script>
  4.  $(document).ready(function() {
  5.    //$('#anadir_cabana').hide();
  6.    $("#nueva_cabana").val('Ocultar');
  7.    $("#nueva_cabana").on("click", function(e) {
  8.      var $boton = $(this);
  9.      $('#anadir_cabana').toggle(500, function() {
  10.        $boton.val($(this).is(':visible') ? 'Ocultar' : 'Mostrar');
  11.      });
  12.      e.preventDefault();
  13.    });
  14.  });
  15. </script>
  16. <div id="anadir_cabana">ESTE ES EL CONTENIDO!!!</div>


En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: Div desplegable como hacer para que se vea desplegado
« Respuesta #2 en: 6 Agosto 2018, 04:20 am »

Intenta no utilizar tanto $(this) cuando puedes utilizar this. La declaración completa de readiness de jquery ($(document).ready()) esta obsoleta, usa $(function(){ en vez de eso.

https://api.jquery.com/ready/
https://medium.com/js-dojo/this-vs-this-48d2122c3750
https://stackoverflow.com/questions/5160322/jquery-this-vs-variable

Código
  1. $(function(){
  2.  
  3.    $('#nueva_cabana').on('click', function(e){
  4.  
  5.        e.preventDefault();
  6.        var _button = this;
  7.  
  8.        $('#anadir_cabana').toggle(500, function(){
  9.            _button.attr('value', (!this.is(':visible') ? 'Mostrar' : 'Ocultar'));
  10.        });
  11.  
  12.    });
  13.  
  14. });
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Guia Como hacer para mover el mouse y hacer click
Programación Visual Basic
gmf_321 7 8,256 Último mensaje 4 Enero 2007, 18:39 pm
por Sancho.Mazorka
Manual Como hacer para mover el mouse y hacer click en vb
Programación Visual Basic
gmf_321 1 11,320 Último mensaje 24 Septiembre 2006, 17:41 pm
por Dahmer
Averiguar el Menu desplegado. « 1 2 »
Programación Visual Basic
LeandroA 11 3,195 Último mensaje 3 Noviembre 2008, 17:47 pm
por LeandroA
Como adapto el menu desplegable de un Combox?
.NET (C#, VB.NET, ASP)
Skeletron 0 1,889 Último mensaje 21 Marzo 2009, 20:58 pm
por Skeletron
como hago para crear menu desplegable?
PHP
TheEGG 89 6 6,379 Último mensaje 26 Octubre 2009, 20:48 pm
por TheEGG 89
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines