<script>
document.querySelector('.navbar-toggler').addEventListener('click', function(){
//1. querySelector
document.querySelector('#list1').classList.toggle('show');
//2. querySelectorAll
document.querySelectorAll('.list-group')[0].classList.toggle('show');
});
</script>
Last updated
<script>
$('.navbar-toggler').on('click', function(){
$('.list-group').toggleClass('show');
$('.list-group').fadeToggle('show');
$('.list-group-item').html('items');
$('.list-group-item').css('color', 'rgb(255,0,220)');
});
</script><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head><div class="black-bg">
<div class="white-bg">
<h4>๋ก๊ทธ์ธํ์ธ์</h4>
<button class="btn btn-danger" id="close">๋ซ๊ธฐ</button>
</div>
</div>
.black-bg {
width : 100%;
height : 100%;
position : fixed;
background : rgba(0,0,0,0.5);
z-index : 5;
padding: 30px;
}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
}