CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user9714025
user9714025

Reputation:

Toggle icon slide to addcart button onclick

I have a plus icon which on-hover, slides to add to cart button. I want to achieve same functionality, using button-click. I have tried CSS but it does not work. Will JQuery can achieve this?

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

Upvotes: 0

Views: 221

Answers (1)

Ginger Wizard
Ginger Wizard

Reputation: 717

If you want this as a CSS only solution you could use a checkbox and the focus pseudo class this might be a bit overkill. It could easily be done with a small amount of JS.

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

You can then replace the .socialIcons .add-cart-new:hover a with .socialIcons .add-cart-new.is-open a.

Upvotes: 2

Related Questions