Spin the div in the opposite direction after being clicked for the second time

After successfully using CSS and Javascript to rotate a div by 45 degrees upon clicking, I encountered an issue when trying to rotate it back to 0 degrees with a second click. Despite my searches for a solution, the div remains unresponsive. Any suggestions on how to fix this would be greatly appreciated! Thanks.

Style

.home {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}


.home.active {
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}

Script

$(document).ready(function(){
    $('.home').click(function(){
        $('.home').removeClass('active');
        $(this).addClass('active');
    });
});

Answer №1

Consider implementing the toggleClass method

$(document).ready(function(){
    $('.home').click(function(){
        $(this).toggleClass('active');
    });
});

Answer №2

CSS3 has the capability to achieve transformation effects. For more information, refer to this Firefox MDN Link.

HTML

<div class="description-wrapper">
    <div class="category-desc-toggle rotate redbg"></div>
    <div class="category-desc">REEED!</div>
</div>

<div class="description-wrapper">
    <div class="category-desc-toggle bluebg rotate"></div>
    <div class="category-desc">Blue</div>
</div>

<div class="description-wrapper">
    <div class="category-desc-toggle yellowbg rotate"></div>
    <div class="category-desc">Yellow Box</div>
</div>

Javascript

 $(".description-wrapper").click(function() {
    $(this).children('div.category-desc').slideToggle(300);
    $(this).children('div.category-desc-toggle').toggleClass("rotate45");
});

CSS

.description-wrapper {
    width: 80px;
    text-align: center;
    margin-bottom: 20px;
}

.redbg {
    background-color: red;
}

.bluebg {
    background-color: blue;
}

.yellowbg {
    background-color: yellow;
}

.rotate { 
    -ms-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    transform: rotate(0deg);
}

.rotate45 { 
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.category-desc-toggle { 
    width: 80px;
    height: 75px; 

    -moz-transition: all .3s; 
    -webkit-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 
}

View Working Demo

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

Ext.ux.TDGi.iconMgr is a cutting-edge plugin designed specifically for the latest version of

Has anyone successfully migrated the Ext.ux.TDGi.iconMgr plugin to ExtJS 4? (http://tdg-i.com/44/extuxtdgiiconmgr...-icons-and-css) ...

Modifying Arrays with Different Data Structures in JavaScript

I am interested in implementing the following scenario: var A = ["Jon","Brad","Rachel"]; var B = ["Male","Male","Female"]; var C = [ {"Jon","Male"}, {"Brad","Male"}, {"Rachel","Female"} ] Can you guide me on how to retrieve var C using javascrip ...

Angular II slash avoiding Pipe

I am working on developing a customized pipe in Angular 2 that will handle the replacement of the backslash ('\') character in a given string. This backslash is commonly used to escape special characters. What I have accomplished so far: T ...

What could be causing the responsive grid to not stack items properly?

I'm struggling to make my page responsive on mobile devices. The elements are not stacking as intended, but rather aligning side by side. How can I fix this issue? My attempts to adjust spacing, padding, and flex-grow values have not yielded the desi ...

selecting the ajax url for the datatable

I need to select the datatable ajax URL based on whether it contains data1, data2, or data3. Below is my code snippet: $(document).ready(function() { var $table = $('#datatable1'); $table.DataTable({ "columnDefs": [ ...

Tips for maintaining the aspect ratio of an image while ensuring it always occupies 100% width and automatically adjusts its height

I've searched everywhere but can't seem to find the right CSS solution for my problem. How can I ensure that an image always fills 100% of the height and width of the screen while maintaining its aspect ratio? .myimage { object-fit: cover; widt ...

Adjusting the height of a jQuery Mobile collapsible post-expansion

My jQuery collapsible is not resizing properly to fit the expanded content. Below is an example of the collapsible structure: <div class="row collapsibles" data-role="collapsible"> <h1>Supercategory A</h1> <div class="col-xs-7 ...

Tips on concealing all elements besides the one with the ID of "mainContainer"

Efforts have been made to conceal everything except the main content on this particular Facebook post The following CSS code has been attempted without success - I would appreciate any assistance. html body * { display:none; } #contentArea { display:b ...

Troubleshooting Problem with jQuery Submit on Chrome in ASP.NET MVC 3 Ajax.BeginForm

Hey everyone, I've been trying to solve a problem all morning without any luck. Here's the issue -> I have an Ajax.BeginForm that is triggered by a checkbox using jQuery: <% using (Ajax.BeginForm("Edit", "Products", ...

When utilizing the array.push method, new elements are successfully added, however, it appears to also overwrite the last object

I'm encountering a strange issue where every time I push an object to the array, the array's length increases as expected. However, the object that I push last ends up overriding all other objects. I can't seem to figure out my mistake, so p ...

Creating a div caption that mimics a form label, but with the background div border removed, can be achieved

Is there a way to create a div caption similar to a form label (positioned in the middle of the border), but without the div's border interfering? The issue is that I can't just use a background color for the H1 (caption) element because there is ...

Optimizing the Use of Included Files in Jquery UI Tabs

Currently, my application is utilizing Jquery's UI Tabs for navigation, which has been quite effective. However, I am facing a dilemma when it comes to implementing a new format. Here is the concept in place: The index.php file incorporates various ...

Creating a stunning image carousel in Vue by integrating a photo API: step-by-step guide

Trying to figure out how to create an image carousel in Vue using photos from an API. Currently able to display the photos using: <section class="images"> <img v-for="image in images" :key="image.id":src="image.assets.large.url"> &l ...

Style the "focus" pseudo-class of an input element using Vue programmatically

Currently, I have been utilizing event listeners to manipulate the :focus pseudo-class of an input element: const element = document.getElementById("myElementID"); element.addEventListener("focus", (e) => { e.target.style.borderCo ...

Tips on avoiding asynchronous issues in NodeJS: Ensure task a is finished before initiating task b

I have a situation where I need to ensure that task B code only executes after task A has completed. Task A involves converting an audio file, while Task B relies on the converted audio for further processing. The issue arises because Task A saves the n ...

Empty initial value of a number type input element in React using TSX

In the process of developing a react POS app using Typescript, I encountered an issue with calculating change when entering the amount of money received from a buyer. The problem arises when the first value passed to the change calculation logic is empty, ...

What is the method for entering text into a Code Mirror line using Selenium?

When I use IE to enter text into a CodeMirror-line text box, the text disappears when I try to save it. I have attempted using JavascriptExecutor to write to the CodeMirror, but it seems to only be for visual purposes. How can I input text into the code mi ...

Learn how to easily modify a value in a CVS file by simply clicking on the data point on a highcharts graph

Is there a way to update my CSV file by clicking on a graph? I want to be able to create a graph from data in the same CSV file and then, when I click on a point, set that point to zero on the y-axis and update the corresponding value in the CSV file to 0. ...

Combine two objects and discard any duplicate keys

I have two objects named original and custom. My goal is to merge the content from custom into original, but only update the keys in original that are also present in the custom object. Here is an example scenario: var original = { coupon: { ...

How can you append an object with a defined key to an array in Vue?

Currently developing a vue-application that includes a component for managing driving licenses. Here is an overview of my data setup: data() { return { custom_licenses: [], basic_licenses: [] } } Within my methods, I have the following l ...