Запустить класс css по клику с помощью javascript

этот вопрос новичок, но я застрял в этом деле. Я надеюсь, что кто-то может мне помочь.

У меня есть этот код:

HTML:

<div class='zone11'>
    <div class='book11'>    
        <div class='cover11'></div>
        <div class='page11'></div>
        <div class='page11'></div>
        <div class='page11'></div>
        <div class='page11'></div>
        <div class='page11'></div>
        <div class='last-page11'></div>
        <div class='back-cover11'></div>
    </div>
</div>

CSS:

.zone11{
   height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.book11{
    display: flex;
    align-items: center;
    cursor: pointer;
}

.book11:hover .cover11{
    transform: rotateX(10deg) rotateY(-180deg);
}

.book11:hover .page11{
    transform: rotateX(10deg) rotateY(-180deg);
    z-index: 2;
}

.cover11{
    z-index: 1;
    transition: all 3.5s;
}

.back-cover11{
    z-index: -3;
}

.cover11, .back-cover11{
    height: 450px;
    width: 360px;
    background: #3f0035;
    border-radius: 2px 20px 20px 2px;
    position: absolute;
    box-shadow: 1px 1px 10px gray;
    transform: rotateX(10deg);
    transform-origin: center left;
}

.page11{
    height: 430px;
    width: 350px;
    background: white;
    position: absolute;
    border-radius: 2px 10px 10px 2px;
    transform: rotateX(10deg);
    transform-origin: center left;
    z-index: -1;
}

.last-page11{
   height: 430px;
    width: 350px;
    background: white;
    position: absolute;
    border-radius: 2px 10px 10px 2px;
    transform: rotateX(10deg);
    transform-origin: center left;
    z-index: -2;
}

.page11:nth-child(2){
    transition-duration: 3s;
}
.page11:nth-child(3){
    transition-duration: 2.6s;
}
.page11:nth-child(4){
    transition-duration: 2.2s;
}
.page11:nth-child(5){
    transition-duration: 1.8s;
}
.page11:nth-child(6){
    transition-duration: 1.4s;
}

.book11:hover .page11:nth-child(2){
    transition-duration: 6s;
}
.book11:hover .page11:nth-child(3){
    transition-duration: 5.6s;
}
.book11:hover .page11:nth-child(4){
    transition-duration: 5.2s;
}
.book11:hover .page11:nth-child(5){
    transition-duration: 4.8s;
}
.book11:hover .page11:nth-child(6){
    transition-duration: 4.4s;
}

Теперь, таким образом, у меня есть анимация книги, которая при наведении курсора открывается на одну страницу (с прокруткой 5 страниц, прежде чем вы попадете туда). Я хочу удалить наведение и убедиться, что он открывается и закрывается при нажатии.

Я убрал наведение из классов. Например обложка:

.cover11__open{
    transform: rotateX(10deg) rotateY(-180deg);
}

И затем в javascript:

var cover11 = document.querySelector('.cover11');
var book11= document.querySelector('.book11');
book11.addEventListener( 'click', function() {
    cover11.classList.toggle('cover11__open');
});

Последнее работало в других случаях, но не здесь. Я также пробовал что-то еще, найденное в Интернете, но ничего. Спасибо.