Hide and show content

Question

I tried to use this form to "store" content (surrounded by blue in the print) that would be shown after clicking on the button that contains the image. But I can’t because the button doesn’t work (it doesn’t hide the content )

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>

Answer 1

Man to my see this part of the code doesn’t make much sense...

function myFunction(x) {
        if (x.matches) {
            $(document).ready(function () { ....

Another mistake is that you put the toggle button inside the element itself that will "togglar"... then a vc that you click on it the content goes away, but the button tb ta disappearing together! So you cannot click again to show the contents pq the button disappears when you click.

Remove these lines from the function, until pq vc is using ID to select the elements. See how it looks

$(document).ready(function () {

$("#abrirlast1").click(function () {
    $("#urban1").toggle();
});

$("#abrirlast2").click(function () {
    $("#urban2").toggle();
});

$("#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;
    }

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="last">

    <h3 class="titulolast">Histórias das vítimas </h3>
    <button id="abrirlast1">
        <img class="img1" src="https://placekitten.com/24/24" width="100%" height="100%">
    </button>

    <div id="urban1">
        <h4 class="tituloimg1"> Nome da vitima 1</h4>
        <div class="videolast"> </div>
        <button class="fecharlast" id="fecharlastid"> Fechar </button>
    </div>

    <button id="abrirlast2">
        <img class="img1" src="https://placekitten.com/20/20" width="100%" height="100%">
    </button>
    <div id="urban2">
        <h4 class="tituloimg1"> Nome da vitima 2</h4>
        <div class="videolast"> </div>
        <button class="fecharlast" id="fecharlastid"> Fechar </button>
    </div>

    <button id="abrirlast3">
        <img class="img1" src="https://placekitten.com/22/20" width="100%" height="100%">
    </button>
    <div id="urban3">
        <h4 class="tituloimg1"> Nome da vitima 3</h4>
        <div class="videolast"> </div>
        <button class="fecharlast" id="fecharlastid"> Fechar </button>
    </div>

</div>

Answer 2

Your code has many problems, one of them is the repetition of id="fecharlastid". An id must be unique on the page, there cannot be two elements with the same id.

Another thing, even more serious, is the repetition of various functions with the same name (it seems you like to repeat things, huh! rs), and still putting $(document).ready(function () { within the function, which makes no sense because the event ready is used to check when the DOM has been loaded. Not to mention that you abuse the use of id’s, which is very unnecessary.

To make something so simple, so it was understood the question, just make the HTML part as simple as possible. I’ll leave an example below, where in no time I needed to use id’s, only classes, and with 3 lines of code already does what you need:

$(".abrirlast, .fecharlast").on("click", function(){
   $(this)[ $(this).hasClass("abrirlast") ?  "next" : "parent" ]().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;
}

.urban{
   display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="last">

   <h3 class="titulolast">Histórias das vítimas</h3>
   <button class="abrirlast">
       <img class="img1" src="./imagens/video_thumbnail.jpg" width="100%" height="100%">
   </button>
   <div class="urban">
       <h4 class="tituloimg1"> Nome da vitima </h4>
       <div class="videolast"> </div>
       <button class="fecharlast"> Fechar </button>
   </div>

    <button class="abrirlast">
        <img class="img1" src="./imagens/video_thumbnail.jpg" width="100%" height="100%">
    </button>
   <div class="urban">
       <h4 class="tituloimg1"> Nome da vitima </h4>
       <div class="videolast"> </div>
       <button class="fecharlast"> Fechar </button>
   </div>

    <button class="abrirlast">
        <img class="img1" src="./imagens/video_thumbnail.jpg" width="100%" height="100%">
    </button>
   <div class="urban">
       <h4 class="tituloimg1"> Nome da vitima </h4>
       <div class="videolast"> </div>
       <button class="fecharlast"> Fechar </button>
   </div>

</div>

In this part:

$(this)[ $(this).hasClass("abrirlast") ?  "next" : "parent" ]().toggle();

I took the event to click on the two classes of the buttons (open and close) and check if what was clicked has the class .abrirlast; if you have, I take the next element (next) and apply the toogle; if not, I take the parent element (parent), meaning the button clicked was to close.