Saludos, tengo este script
<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
Saludos,
- Comenta o elimina la línea que oculta (hide) tu contenido e inicializa el val() del botón a 'Ocultar':
<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>
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
$(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'));
});
});
});