Tentei usar esta forma para "guardarmos" conteúdo (rodeado a azul na print) que seria mostrado após clicar no botao que contém a imagem. Mas não estou a conseguir pois o botão não funciona (não esconde o conteúdo )
function myFunction(x) {
if (x.matches) {
$(document).ready(function () {
$("#abrirlast1").click(function () {
$("#urban1").toggle();
});
});
}
}
function myFunction(x) {
if (x.matches) {
$(document).ready(function () {
$("#abrirlast2").click(function () {
$("#urban2").toggle();
});
});
}
}
function myFunction(x) {
if (x.matches) {
$(document).ready(function () {
$("#abrirlast3").click(function () {
$("#urban3").toggle();
});
});
}
}
.last {
height: 100%;
padding: 10px;
text-align: center;
background-image: url(./imagens/blackfundo2_baixo.jpg);
}
.tituloimg1{
margin: 5px;
}
.videolast {
background: red;
width: 80vw;
height: 20vh;
margin-bottom: 10px;
}
.fecharlast {
float:right;
margin-bottom: 15px;
}
<div class="last">
<h3 class="titulolast">Histórias das vítimas</h3>
<button id="abrirlast1">
<img class="img1" src="./imagens/video_thumbnail.jpg" width="100%" height="100%">
</button>
<div id="urban1">
<h4 class="tituloimg1"> Nome da vitima </h4>
<div class="videolast"> </div>
<button class="fecharlast" id="fecharlastid"> Fechar </button>
</div>
<div id="urban2">
<button id="abrirlast2">
<img class="img1" src="./imagens/video_thumbnail.jpg" width="100%" height="100%">
</button>
<h4 class="tituloimg1"> Nome da vitima </h4>
<div class="videolast"> </div>
<button class="fecharlast" id="fecharlastid"> Fechar </button>
</div>
<div id="urban3">
<button id="abrirlast3">
<img class="img1" src="./imagens/video_thumbnail.jpg" width="100%" height="100%">
</button>
<h4 class="tituloimg1"> Nome da vitima </h4>
<div class="videolast"> </div>
<button class="fecharlast" id="fecharlastid"> Fechar </button>
</div>
</div>
myFunction
é criada mas nunca é executada, onde você chama ela? 3) Que tipo de dado éx
? O que éx.matches
? 4) Porquê você tem$(document).ready()
dentro dos seusif
? Você sabe o que isso faz?