Каталог флагов

Австралия

Флаг Австралии

Это флаг страны Австралии
Был приурочен к 1985

Австралия

Флаг Австрии

Это флаг страны Австрии
Был приурочен к 1983

Россия

Флаг Росси

Это флаг страны Россия
Был приурочен к 1984

    
------------------------------------------------------------------------------------------------------------------------
HTML КОД:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Домашнее задание 16 урока</title>
</head>
<body>
    <header>
        <h1 style="text-align: center;">Каталог флагов</h1>
    </header>
    <main style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
        <div style="text-align: center; border: #483D8B solid 3px; padding: 10px; display: flex; flex-direction: row; justify-content: center;   gap: 50px; width: 80%;"  >
            <div>
                <div style="width: 600px; border: black solid 1px; padding: 10px">
                    <img src="img/img1.png" alt="Австралия" width="500" height="250">
                    <p>Флаг Австралии</p>
                    <button class="btn1">Подробно</button>
                    <p class="p1">Это флаг страны Австралии<br>Был приурочен к 1985</p>
                </div>
            </div>
            <div>
                <div style="width: 600px; border: black solid 1px; padding: 10px">
                    <img src="img/img2.png" alt="Австралия" width="500" height="250">
                    <p>Флаг Австрии</p>
                    <button class="btn2">Подробно</button>
                    <p class="p2">Это флаг страны Австрии<br>Был приурочен к 1983</p>
                </div>
            </div>
            <div>
                <div style="width: 600px; border: black solid 1px; padding: 10px">
                    <img src="img/img3.png" alt="Россия" width="500" height="250">
                    <p>Флаг Росси</p>
                    <button class="btn3">Подробно</button>
                    <p class="p3">Это флаг страны Россия<br>Был приурочен к 1984</p>
                </div>
            </div>
        </div>        
    </main>
    <footer></footer>
    <script src="../../l15-JS_jQuery_знакомство/jquery-4.0.0.js.js"></script>
    <script src="js/index.js"></script>
</body>
</html>    
------------------------------------------------------------------------------------------------------------------------
JS КОД

$('.p1').hide();
$('.p2').hide();
$('.p3').hide();

$(function () {
    $('.btn1').
    click(function () {
        $('.p1').show()}).
    dblclick(function () {
        $('.p1').hide()})
});

$(function () {
    let flag = true;
    $('.btn2').
    click(function AddDelete() {
        if (flag) {
            $('.p2').show()
        }
        else {
            $('.p2').hide()
        }
        flag = !flag;
    })
});

$(function () {
    let flag = true;
    $('.btn3').
    click(function AddDelete() {
        if (flag) {
            $('.p3').show()
        }
        else {
            $('.p3').hide()
        }
        flag = !flag;
    })
});