Slide the toggle icon to activate the add-to-cart button on click!

Is it possible to achieve the functionality of sliding a plus icon to an add to cart button on click, instead of hover? I have attempted using CSS without success. Would JQuery be able to accomplish this task?

codepen.io

HTML

<div class="socialIcons">
  <div class="add-cart-new">
    <a href="" class="add-cart-a">
      <i class="fa-3x fa fa-plus-circle"></i>
      <span class="text-add-cart">     Add to cart </span>
    </a>
  </div>
</div>

CSS

.add-cart-a
{
width: 181px; 
}
.add-cart-new
{
 height: 56px; 
}
.socialIcons .add-cart-new {
  background-color: yellow;
  list-style: none;
  display: inline-block;
  margin: 4px;
  border-radius: 2em;
  overflow: hidden;
}
.socialIcons .add-cart-new a {
  display: block;
  padding: 0.5em;
  min-width: 2.5em;
  max-width: 2.5em;
  height: 2.28571429em;
  white-space: nowrap;
  line-height: 1.5em; /*it's working only when you write text with icon*/
  transition: 0.5s;
  text-decoration: none;
  font-family: arial;
  color: #fff;
}
.socialIcons .add-cart-new i {
  margin-right: 0.5em;
}
.socialIcons .add-cart-new:hover a {
  max-width: 205px;
  padding-right: 1em;
}
.socialIcons .add-cart-new {
  background-color: #EC7F4A;
}
.socialIcons .add-cart-new a
{
  position:relative;
  bottom:5px;
  right:0.3px;
} 
.text-add-cart
{
  position:relative;
  right:7px;
  bottom:12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

This is the code I have tried: JSFiddle

javascriptjqueryhtmlcss

Answer №1

If you're looking for a pure CSS solution, consider using a checkbox along with the focus pseudo-class. However, this may be a bit excessive and can easily be achieved with just a small amount of JavaScript.

$('.add-cart-new').click(function() {
  $(this).toggleClass('is-open');
});

To implement this, simply replace 

.socialIcons .add-cart-new:hover a
with 
.socialIcons .add-cart-new.is-open a
.

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

Troubleshooting a JQuery Ajax mishap

I'm currently using ajax to send form values to a PHP script. The PHP script echoes either 1 for success or 2 for failure. Although the PHP script appears to be functioning correctly, when I run the javascript, I get redirected to a URL and see the n ...

phpjqueryajaxpost

Incorporating a pre-existing component into a Vue.JS template through an onclick event: How can this

I'm trying to enhance my template by implementing a feature that allows me to add a component simply by clicking on a button. Let me give you a glimpse of what I have in mind: The component named Draggable.vue is the one I intend to incorporate upon c ...

javascripthtmlvue.js

`Balance in structure`

Having trouble with CSS. I would like to make this form symmetrical. Buttons should be in one column, textfields in another, and the question mark should also have its own column. Apologies if the ticket structure is not perfect, this is only my second on ...

cssreactjsforms

What might be causing my CSS selector to be considered as invalid?

Looking to utilize the database ID below as a selector 5b4bb7d2685cfb094b1d46c3 Here is the snippet: document.querySelector('#5b4bb7d2685cfb094b1d46c3') <button id="5b4bb7d2685cfb094b1d46c3"> However, when trying the selector, an erro ...

javascripthtmlcss

Observable in RXJS, with a pipe that transforms based on a dynamic function

I want to create an observable that gets populated with a custom pipe every time it is called. Let me explain this concept with an example: const myObservable = timer(1000); return myObservable.pipe(getCustomPipe()); function getCustomPipe() { return c ...

javascriptangularrxjs

'Error: Object does not have access to the specified property or method 'values'

I've been working on writing some code to retrieve and read a JSON file. It seems to work fine in Chrome, but I'm running into issues with IE11, which is the browser I need to use. I've tried changing variable names, but the problem persists ...

javascripthtml

Express.js throws an error when trying to access req.session when it

I've searched through multiple posts on this topic, however, none were able to resolve my issue. Below is the code snippet from my server.js file: var express = require('express'); var app = express(); app.configure(function(){ app.set ...

javascriptnode.jsexpress

Slider in MaterialUI featuring a vibrant spectrum of colors

Currently, I am delving into MaterialUI and my focus is on creating a range slider. I came across this example that I found useful: https://material-ui.com/components/slider/#range-sliders My goal is to assign different colors to the "high," "medium," and ...

cssmaterial-ui

Enhance JQuery functionality using Typescript

Currently, I am in the process of developing a Typescript plugin that generates a DOM for Header and attaches it to the page. This particular project utilizes JQuery for handling DOM operations. To customize the plugin further, I aim to transmit config Opt ...

javascriptjquerytypescriptdefinitelytyped

This error message 'React Native _this2.refs.myinput.focus is not a function' indicates that

When working with React-Native, I encountered a specific issue involving a custom component that extends from TextInput. The code snippet below demonstrates the relevant components: TextBox.js ... render() { return ( <TextInput {...this.props} ...

javascriptreactjsreact-nativeecmascript-6

Differences between Arrays of Numbers and Objects in Typegoose

Exploring Typegoose and encountering a puzzling issue. I defined a class with a field meant to store an array of numbers like this: class A { ... some other properties ... @prop({ required: true }) public nums!: number[]; } Here's a snippet of ...

javascriptnode.jsmongodbtypescripttypegoose

Having trouble with your website not adjusting properly when resizing the browser or viewing it on a mobile phone

My website is not adapting properly to different screen sizes, even after I have added the META tags below. Any advice would be appreciated. Thank you. HTML <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8> ...

htmlcssmeta

Using a CSS style to modify a class based on another class at the same level in the hierarchy

I am working with a jQuery carousel that is adding an 'active' class to images within a div. Within the same div, there is also a span with a 'fade' class that has a CSS style of opacity: 0. Is there a way to change the CSS style of the ...

javascriptjquerycss

How to retrieve the complete file path of an image during the image upload process

I am having trouble uploading an image as it only takes the file name with extension, not the full path. <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">< ...

phpjquery

Struggling to get the findAndModify or Update functions to work properly in MongoDB. Despite fetching the desired data from my ajax call, I am unable to make any changes in the database

Here is the ajax code snippet: $(function () { $("#upvoteClick").click(function () { $.ajax({ type:"POST", data: {upvote: 2}, dataType: 'json', url:"http://localhost:9000/api/upvote" }).success(functi ...

javascriptajaxnode.jsmongodbexpress

Change the Vue3 PrimeVue theme or CSS file with a simple click or upon page load

One way to incorporate themes is by importing them in the main.js file at the root of the app: import 'primevue/resources/themes/arya-orange/theme.css'; However, I am exploring ways to dynamically switch CSS files based on the user's system ...

javascriptvue.jsimportvuejs3primevue

What are the best methods for retrieving data from a subcollection in Firebase/Firestore with maximum efficiency

Utilizing Firestore to store posts with simple properties like {title: 'hi', comment: true} has been a seamless process for fetching user-specific data, given the structure of my collection: posts/user.id/post/post.name. An example would be posts ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Unable to display the attributes of an object using console.log

I am attempting to log the properties of an object in TypeScript, but I am encountering issues. setTitleAndBody(result: { title: String; body: String; }) { console.log(result) console.log(result.title) } What's interesting is that if I only l ...

javascriptreactjstypescript

Download files using AJAX in Laravel 5.6

I am faced with a challenge in my Laravel 5.6 REST API. Users have the capability to upload their files to a non-public folder. Now, I need to ensure that users can only download files if their JWT token is valid and they have the necessary privilege. H ...

phpjqueryajaxlaravel-5download

What steps do I need to take to create my own Japanese tatami mat design?

Looking to design an HTML layout inspired by the classic Japanese tatami mat pattern. https://i.sstatic.net/vLUtp.png Experimented with using rowspan and colspan in a table layout, making progress until the final colspan caused things to collapse. td ...

htmlcss