Activate a CSS class on click using JavaScript

Having a bit of trouble as a beginner with this. Any help would be much appreciated.

This is the code in question:

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;
}

I currently have a book animation that opens to one page when hovered over (with 5 pages scrolling before it reaches there). I want to change it so that it opens and closes on click rather than hover.

I removed the hover from the classes. For example, the cover now has an open state:

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

Here is the corresponding javascript:

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

The above method has worked for me in other cases but doesn't seem to work here. I've also tried some other solutions found online with no luck. Appreciate any assistance.

javascriptjquerycssanimationonclick

Answer №1

If you want to enhance the styling of your book cover, consider incorporating the following CSS code:

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

.book11__open .page11 {
   transform: rotateX(10deg) rotateY(-180deg);
   z-index: 2;
}
.book11__open .page11:nth-child(2) {
  transition-duration: 6s;
}
.book11__open .page11:nth-child(3) {
  transition-duration: 5.6s;
}
.book11__open .page11:nth-child(4) {
  transition-duration: 5.2s;
}
.book11__open .page11:nth-child(5) {
  transition-duration: 4.8s;
}
.book11__open .page11:nth-child(6) {
  transition-duration: 4.4s;
}

Ensure that any unnecessary hover effects are disabled or removed to streamline the design.

In addition, update the JavaScript code by replacing the existing onclick with the following snippet:

book11.addEventListener( 'click', function() {
    cover11.classList.toggle('cover11__open');
    book11.classList.toggle('book11__open')//this is the added line.
});

By applying the classes .cover11__open and .book11__open in the CSS with the specified properties, clicking on the cover will trigger the addition or removal of these classes, resulting in a captivating animation effect.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using ReactJS to search for and replace strings within an array

A feature of my tool enables users to input a string into a textfield and then checks if any words in the input match with a predetermined array. If the user's string contains a specific name from the array, I aim to replace it with a hyperlink. I&a ...

javascripthtmlnode.jsreactjsjavascript-objects

Guide to match the size of <td> with an <img>

I am currently attempting to align several images in my HTML using the <table> element. My goal is to eliminate any white space between the images. You can view my progress so far in this JSFiddle example: JSFiddle example. However, I am still encoun ...

htmlcsshtml-table

The Jquery ajax function fails to execute after upgrading the framework version from 3.5 to 4.0

After testing with alert, I am facing an issue where the ajax call is not working in my aspx.cs file when switching from .NET framework 3.5 to 4.0. The ajax function being used is: function GetCustomers(pageIndex) { $.ajax({ t ...

c#jqueryasp.netajax

Understanding the response format in jQuery and AJAX

Can anyone advise on the optimal data format for communication with JavaScript? Should I stick to JSON or use plain HTML instead? Are there any alternatives worth considering? ...

jqueryhtmlajaxjson

Guide to successfully setting up a Json server and ReactJS to run simultaneously on the same port

Currently, I am facing an issue while attempting to run my React application with a JSON server as the backend API. The problem arises when trying to run them on different ports due to a CORS error. I am currently seeking advice and looking for a solutio ...

javascriptreactjsjsonjson-server

Keep a close eye on your Vue app to make sure it's

<template> <v-form :model='agency'> <v-layout row wrap> <v-flex xs12 sm12 lg12 > <v-layout row wrap> <v-flex xs12 md12 class="add-col-padding-right"> <v-radio-group v-mod ...

javascriptvue.js

Unable to find the module... designated for one of my packages

Within my codebase, I am utilizing a specific NPM package called my-dependency-package, which contains the module lib/utils/list-utils. Moreover, I have another package named my-package that relies on my-dependency-package. When attempting to build the pr ...

javascriptnode.jstypescriptnpm

What is the outcome of XmlHttpRequest.responseText?

I am new to JavaScript and looking to explore the potential of XMLHttpRequest.responseText with a specified URL. Can someone guide me on how to efficiently test this? let url = "http://m.google.com/"; <br> let xmlHttp = new XMLHttpRequest(); <br& ...

javascriptxmlhttprequestresponsetext

JavaScript framework that is easily customizable to include support for XmlHttpRequest.onprogress, even if it needs to be emulated

Which JavaScript library or framework offers support for the "onprogress" event for XmlHttpRequest, even if it needs to be emulated using a plugin or extension? Alternatively, which JavaScript framework is the most straightforward to extend in order to add ...

ajaxxmlhttprequestjavascript

Here is a way to retrieve the name of a ref object stored in an array using Vue.js 3 and Typescript

I have a Form, with various fields that I want to get the value of using v-model and assign them to ref objects. In order to populate my FormData object with this data, I require both the name and the value of the ref objects. Unfortunately, I am struggli ...

javascripttypescriptvue.jsvuejs3

Do specific href values need to be specified for document.links to return links?

Is there a shortcut to create an array of links in JavaScript without using a loop? var links = document.links; Instead of looping through the array to find elements with href attribute equal to '/somehref', is there a way to directly filter th ...

javascript

Tips for efficiently combining mergeMap observables and providing a singular value for the entire observable

Consider this particular case involving TypeScript/angular with rxjs 6.5: main(){ const items = ['session', 'user']; const source: Observable<any> = from(items); source .pipe( ...

javascriptangulartypescriptrxjs

Could someone shed some light on why hjk fails to print whenever I click?

Why is the code not printing 'hgk' every time I click? The debounce function should run and print 'hgk' each time the button is clicked. Can someone please explain why this is not happening? const debounce=(fn,delay)=>{ ...

javascripthtmlreactjsdomdom-events

Show only specific data from JSON results

I am trying to display a specific cryptocurrency's price without the need for curly braces or explicitly stating "USD". Currently, it appears as {"USD":0.4823} when using the following code: <script> $(document).ready(function () { ...

javascriptjson

ASP.NET MVC2 JsonResult: Sorry, this request has been denied

Although this question may sound familiar, I just can't seem to get over it. This section pertains to my Controller Action: public JsonResult AddToCart(int pId, int qty = 1, int optVal = 0) { AjaxActionResult response = new AjaxActionResult(); r ...

asp.netjqueryajaxasp.net-mvc-2jsonresult

Utilizing HTML5 data attributes to store intricate JSON objects and manipulate them using JavaScript

Recently, I encountered a unique challenge that I set for myself... I am currently in the process of developing an advanced ajax content loader plugin that comes with an array of options and callbacks. In order to streamline the initialization process and ...

javascriptjsonhtml

CSS: The Drop Down menu suddenly vanishes every time I attempt to select an item from the visible list

I'm facing an issue with my dropdown menu that I can't seem to resolve. Whenever I hover over the menu, it disappears before I can even click on any items. <ul id="menu"> <li><a href="#title">Home</a></li> ...

htmlcss

Searching for particular information within an array of objects

Seeking guidance as a newbie on how to extract a specific object from an array. Here is an example of the Array I am dealing with: data { "orderid": 5, "orderdate": "testurl.com", "username": "chris", "email": "", "userinfo": [ ...

javascriptarraysangulartypescript

The onKeyUp event in Material-UI components does not seem to be functioning as

I am experiencing an issue with a material-ui component Grid where the onKeyUp event does not seem to be triggering as expected. Here is the code snippet: <Grid item xs={12} onKeyUp={handleClickOnKeyUp} sx={{cursor: "pointer"}} onClick= {ha ...

javascriptreactjsmaterial-uionkeyup

A guide on retrieving query string parameters from a URL

Ways to retrieve query string parameters from a URL Example Input - www.digital.com/?element=fire&solution=water Example Output - element = fire solution = water ...

javascript