Accordion in jQuery

<!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">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="accItem">jQuery</div>
            <div class="accSubItem">Is really cool!</div>
            <div class="accItem">jQuery</div>
            <div class="accSubItem">Is really cool!</div>
            <div class="accItem">jQuery</div>
            <div class="accSubItem">Is really cool!</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>
.accItem{
    padding: 20px;
    color:white;
    background-color: rgb(122, 122, 122);
}
.accSubItem{
    padding: 20px;
    background-color: rgb(240, 240, 240);
    display: none;
}
$(document).ready(function(){
    $(".accItem").click(function(){
        $(this).next('.accSubItem').slideToggle(1000);
    })
});
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