Animacja accordion w javascript

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="row tg">
            <div class="col-md-6 toggleClick">Click me to show</div>
            <div class="col-md-6 ukryty toggleMsg">message</div>
        </div>

        <div class="row tg">
            <div class="col-md-6 toggleClick">Click me to show</div>
            <div class="col-md-6 ukryty toggleMsg">message</div>
        </div>

    </div>

    <script type="text/javascript" src="main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

.tg div:first-child{
    padding: 10px;
    border: 1px solid #44aaaa;
}

.tg .ukryty.toggleMsg {
    background-color: rgba(255, 255, 255, 0);
    border:0;
    font-size:0;
    padding: 0;
    width:0;
}
.tg .toggleMsg{
    background-color: #44aaaa;
    border: 1px solid #44aaaa;
    color:white;
    max-width: 100%;
    padding: 10px;
}

let toggleItems = document.getElementsByClassName("toggleClick");
for(let i=0;i<toggleItems.length;i++){
    toggleItems[i].addEventListener("click", openHide);
}

function openHide(){
    let msg = this.parentNode.getElementsByClassName("toggleMsg")[0];
    if(msg.classList.contains("ukryty")){
        msg.classList.remove("ukryty");
        this.textContent = "Click to hide";
    }else{
        msg.classList += " ukryty";
        this.textContent = "Click me to show";    
    }
    msg.style.transition = "all 0.5s ease-out";
}
Ask ChatGPT
Set ChatGPT API key
Find your Secret API key in your ChatGPT User settings and paste it here to connect ChatGPT with your Tutor LMS website.
Scroll to Top