Tengo este codigo Html y jquery respectivamente:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>practica3</title>
<link rel="stylesheet" href="css/style3.css">
</head>
<body>
<div class="wrapper">
<h1 class="top-beach">Beach1</h1>
<img class="img-beach" src="img/playa1.png" alt="">
<h1 class="top-beach">Beach2</h1>
<img class="img-beach" src="img/playa2.jpg" alt="">
<h1 class="top-beach">Beach3</h1>
<img class="img-beach" src="img/playa3.jpg" alt="">
<h1 class="top-beach">Beach4</h1>
<img class="img-beach" src="img/playa4.jpg" alt="">
<h1 class="top-beach">Beach5</h1>
<img class="img-beach" src="img/playa5.jpg" alt="">
<h1 class="top-beach">Beach6</h1>
<img class="img-beach" src="img/playa6.jpg" alt="">
</div>
<script src="
http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/miscript3.js"></script>
</body>
</html>
$(document).ready(function(){
var fotos=$(".img-beach");
fotos.hide();
var boton=$("<button>Mostrar Playa</button>");
$(".top-beach").append(boton);
$("h1.top-beach button").click(function(){
//$(".img-beach").hide("slow");
//$(this).parent().next().show("slow");
if($(this).parent().next().css("display")=="inline"){
$(".img-beach").hide("slow");
$(this).text("Mostrar Playa");
}else{
$(".img-beach").hide("slow");
$(this).parent().next().show("slow");
$(this).text("Mostrar Playa");
$(this).text("Ocultar Playa");
}
//$(this).parent().next().show();
/*if($(this).parent().next().css("display")=="inline"){
$(this).parent().next().hide("slow");
$(this).text("Mostrar Playa");
}else{
$(this).parent().next().show("slow");
$(this).text("Ocultar Playa");
}*/
})
})
*Hago click en un boton y la imagen se despliega y cuando hago click en otro boton ,la imagen anterior se vuelve a plegar pero el texto del boton("ocultar boton") se queda y no cambia a "mostrar boton" .Alguien tiene una forma de resolver esto ,asi no sea con If,como lo estoy haciendo yo...Gracias