Div desplegable como hacer para que se vea desplegado

[Alarkon_88]

Saludos, tengo este script

Código [Seleccionar] Expandir



<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

[EdePC]

Saludos,

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

Código (javascript) [Seleccionar] Expandir

<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>

[#!drvy]

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 (javascript) [Seleccionar] Expandir

$(function(){

   $('#nueva_cabana').on('click', function(e){

       e.preventDefault();
       var _button = this;

       $('#anadir_cabana').toggle(500, function(){
           _button.attr('value', (!this.is(':visible') ? 'Mostrar' : 'Ocultar'));
       });

   });

});