its kinda of drop down menu and genre–box affect other sections like a refreshing web. Text decoration is present in all texts any

 <!-- =====================genre box========================== -->
             
     <!-- <!-- <div class="genre"> -->
         <!-- <div class="genre-wrap">
            <div class="genre-txt-btn">
                <h2>Жанр</h2>  <button type="button" id="hideBtn"><i class="fa-regular fa-circle-xmark"></i></button>
            </div>
            <div class="genre-list">
                <ul>
                    <li><a href="#">Адал явдалт</a></li>
                    <li><a href="#">Аймшгийн</a></li>
                    <li><a href="#">Дайн тулаан</a></li>
                    <li><a href="#">Ер бусын</a></li>
                    <li><a href="#">Ид шид</a></li>
                    <li><a href="#">Спорт</a></li>
                    <li><a href="#">Түүхэн</a></li>
                    <li><a href="#">Уран зөгнөлт</a></li>
                    <li><a href="#">Хайр дурлал</a></li>
                    <li><a href="#">Харем</a></li>
                    <li><a href="#">Хөгжмийн</a></li>
                    <li><a href="#">Цэргийн</a></li>
                    <li><a href="#">Инээдэм хөгжилтөй</a></li>
                    <li><a href="#">Тулааны урлага</a></li>
                    <li><a href="#">Сүнс</li>
                    <li><a href="#">Супер хүч</li>
                    <li><a href="#">Манхва</li>
                </ul>
            </div>
        </div>
     </div>  -->
!-- =====================script========================== -->

const genreHideBtn = document.getElementById('hideBtn');
    genreHideBtn.addEventListener('click',()=>{
        let genreList = document.querySelector('.genre-list');
            genreList.classList.toggle('genre-list2');
    })

Are there reasons for js or is there a lack of proper div management?