Develop Reference

HTML/CSS- Font awesome showing as square space

I'm trying to get Font-Awesome (6.2.1) to work but it's only showing up as squares. I dont know if i linked right, because the font awesome link always confuses me.
Does anyone have any suggestions?Its my cart icon
#product1 .pro .des .cart{
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50px;
background-color: #e8f6ea;
font-weight: 500;
color: #088178;
border: 1px solid #cce7d0;
position: absolute;
bottom: 20px;
right: 10px;
}
<div class="pro">
<img src="casa-wacom-2-removebg-preview.png" alt="">
<div class="des">
<span>Wacom</span>
<h5>Case para Wacom</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<a><i class="fa-light fa-cart-shopping cart"></i></a>
<h4>R$19,99</h4>
</div>
</div>

Have you included the Font-Awesome (6.2.1) CDN? In such a case, add it.
To your Squarespace website page, add Font Awesome icons
Go to Font Awesome and choose an icon you would like to add to your Squarespace website and copy the code.
For the rocket icon copy this code:
<i class="fas fa-rocket"></i>
You can copy this code to a code block on your Squarespace website.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

Did you mean:
<i class="fa-solid fa-star"></i>
?

How to move the ID of one element to another using JS

I am trying to create a slide show of icons. All the icons are in one class. Another style class called "active" will have an ID and represents the current picture. Clicking the left or right button should change the style of the active class.
const leftArrow = document.getElementById('left-arrow');
const activeImg = document.getElementById('active') const nextImg = activeImg.nextElementSibling; // Handle left click leftArrow.addEventListener('click', function(){ activeImg.classList.remove('active');
nextImg.classList.add('active');
return nextImg
});
.icon-container i {
font-size: 150px;
position: relative;
left: 12rem;
top: 12rem;
z-index: -10;
display: none;
}
#active {
z-index: 10;
display: flex;
}
.left-arrow,
.right-arrow {
width: 50px;
height: 50px;
transition: .5s;
float: left;
box-shadow: -2px 2px 0 rgba(238, 0, 0, 0.5);
cursor: pointer;
}
<div class="object-container">
<div class="icon-container">
<i class="fa fa-car" id="active"></i>
<i class="fa fa-bicycle"></i>
<i class="fa fa-plane"></i>
<i class="fa fa-ship"></i>
<i class="fa fa-fighter-jet"></i>
<i class="fa fa-space-shuttle"></i>
</div>
<div class="arrow-buttons">
</div>
</div>
The problem is that when I click the left arrow, nothing happens. I've also tried with the right arrow but that doesnt even show the cursor pointer so I don't know where I went wrong there. I've played around with z-index and display types but the buttons don't seem to be working?
Thanks

I recommend using a class name and not an id. Here's how you can do that:
https://jsfiddle.net/sauz07d5/1
<div class="object-container">
<div class="icon-container">
<i class="fa fa-car active"></i>
<i class="fa fa-bicycle"></i>
<i class="fa fa-plane"></i>
<i class="fa fa-ship"></i>
<i class="fa fa-fighter-jet"></i>
<i class="fa fa-space-shuttle"></i>
</div>
<div class="arrow-buttons">
<button class="right-arrow" id="right-arrow"></button>
<button class="left-arrow" id="left-arrow"></button>
</div>
</div>
.icon-container i{
font-size: 150px;
position: relative;
left: 12rem;
top: 12rem;
z-index: -10;
display: none;
}
.left-arrow, .right-arrow{
width: 50px;
height: 50px;
transition: .5s;
float: left;
box-shadow: -2px 2px 0 rgba(238, 0, 0, 0.5);
cursor: pointer;
}
.active {
z-index: 10 !important;
display: flex !important;
}
const leftArrow = document.getElementById('left-arrow');
const rightArrow = document.getElementById('right-arrow');
// Handle left click
var element = document.querySelector(".icon-container")
function slideNext() {
let currentImg = document.querySelector(".active");
let nextImg = currentImg.nextElementSibling ? currentImg.nextElementSibling : element.children[0];
currentImg.classList.remove("active");
nextImg.classList.add("active");
}
function slidePrevious() {
let currentImg = document.querySelector(".active");
let previousImg = currentImg.previousElementSibling ? currentImg.previousElementSibling : element.children[element.children.length - 1];
currentImg.classList.remove("active");
previousImg.classList.add("active");
}
leftArrow.addEventListener('click', slideNext);
leftArrow.addEventListener('touch', slideNext);
rightArrow.addEventListener('click', slidePrevious);
rightArrow.addEventListener('touch', slidePrevious);

var icons = [...document.querySelectorAll('.icon-container .fa')];
function adjustActive (adjustment) {
var current = icons.find(it => it.id === 'active');
var currentIndex = icons.indexOf(current);
var nextIndex = (currentIndex + adjustment) % icons.length;
if (nextIndex < 0) nextIndex = icons.length - 1;
current.removeAttribute('id');
icons[nextIndex].id = 'active';
}
document.querySelector('#left-arrow').addEventListener('click', e => adjustActive(-1));
document.querySelector('#right-arrow').addEventListener('click', e => adjustActive(1));
#active {
color: red;
}
<div class="object-container">
<div class="icon-container">
<i class="fa fa-car" id="active">Car</i>
<i class="fa fa-bicycle">Bike</i>
<i class="fa fa-plane">Plane</i>
<i class="fa fa-ship">Ship</i>
<i class="fa fa-fighter-jet">Jet</i>
<i class="fa fa-space-shuttle">Shuttle</i>
</div>
<div class="arrow-buttons">
Prev
Next
</div>
</div>
While it is typically preferable to move classes around, you can (if you must) move ids around. The example above uses the id to find the active element, and using the position of the active element in the array of elements, it finds the next element by adjusting the current index. Then it is a simple matter of removing the id from the old current and putting it on the new current.

Instead of using active as an ID, you should use it as a class, like so:
<div class="icon-container">
<i class="fa fa-car active"></i>
<i class="fa fa-bicycle"></i>
<i class="fa fa-plane"></i>
<i class="fa fa-ship"></i>
<i class="fa fa-fighter-jet"></i>
<i class="fa fa-space-shuttle"></i>
</div>
Just create click listeners for the left and right buttons and remove the active class from the current item and add it to its previous or next sibling.
Or, if you consider its not worth the time to create your own implementation you can also use an already available one like Owl Carousel

How to add Eventlisteners to all elements of a class but execute it only for a particular element during mouseover?

I've been trying to write a javascript code in which the user will be displayed three options (Purchase, Add to cart, Add to wishlists), whenever they will hover above an image of a book. The problem is that all the options for all the books are shown simultaneously when I hover above any image. Is there any way to display options only for the particular book on which the cursor is over.
let images = document.getElementsByClassName('images');
let options = document.getElementsByClassName('options');
for (const index of options)
{index.style.display = 'none';}
for (index = 0; index < images.length; index++) {
images[index].addEventListener('mouseover', () => {
for (const iterator of options) {
iterator.style.display = 'inline-block';
}
});
}
for (index = 0; index < images.length; index++) {
images[index].addEventListener('mouseout', () => {
for (const iterator of options) {
iterator.style.display = 'none';
}
});
}
.slider {
display: flex;
justify-content: space-between;
margin: 25px 0px;
}
.book {display: inline-block; position: relative;}
.book a {display: block; width: 20vw;}
.info {
display: block;
text-align: center;
text-decoration: none;
color: rgb(90, 90, 90);
font-size: 17px;
font-weight: 500;
transition: color 250ms;
}
.info:hover {color: rgb(255, 0, 0);}
.book a:hover {color: rgb(255, 0, 0);}
.book .info:last-of-type {margin-top: 5px;}
.book_price {text-align: center; margin: 10px 0px;}
.book_price p {
display: inline;
color: rgb(90, 90, 90);
font-size: 17px;
font-weight: 500;
margin: 10px 5px;
}
.book_price span:last-of-type p {color: rgb(255, 0, 0);}
.options {
background-color: rgba(255, 255, 255, 0.7);
display: inline-block;
position: absolute;
bottom: 250px;
right: 62px;
padding: 10px;
}
.options a {
display: inline-block;
color: rgb(90, 90, 90);
font-size: 22px;
padding: 5px 10px;
width: auto;
transition: color 250ms;
}
.options a:nth-of-type(2) {border-right: 1px solid rgb(50, 50, 50); border-left: 1px solid rgb(50, 50, 50);}
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css">
<div class="slider">
<div class="book" class="book_1">
<img src="http://www.cliometrics.com/bbw/images/product/1.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
$10,000,000 Marraige Proposal
-James Patterson
<div class="book_price">
<span><del><p>₹200.00</p></del></span>
<span><p>₹160.00</p></span>
</div>
</div>
<div class="book" id="book_2">
<img src="http://www.cliometrics.com/bbw/images/product/2.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
How to write your first Book
-Reader's Digest
<div class="book_price">
<span><del><p>₹400.00</p></del></span>
<span><p>₹260.00</p></span>
</div>
</div>
<div class="book" class="book_3">
<img src="http://www.cliometrics.com/bbw/images/product/3.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
10,000 Time saving Ideas
-G.H. Miller
<div class="book_price">
<span><del><p>₹300.00</p></del></span>
<span><p>₹150.00</p></span>
</div>
</div>
<div class="book" class="book_4">
<img src="http://www.cliometrics.com/bbw/images/product/4.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
10,000 Time saving Ideas
-G.H. Miller
<div class="book_price">
<span><del><p>₹300.00</p></del></span>
<span><p>₹150.00</p></span>
</div>
</div>
<div class="book" class="book_5">
<img src="http://www.cliometrics.com/bbw/images/product/5.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
10,000 Time saving Ideas
-G.H. Miller
<div class="book_price">
<span><del><p>₹300.00</p></del></span>
<span><p>₹150.00</p></span>
</div>
</div>
<div class="book" class="book_6">
<img src="http://www.cliometrics.com/bbw/images/product/6.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
10,000 Time saving Ideas
-G.H. Miller
<div class="book_price">
<span><del><p>₹300.00</p></del></span>
<span><p>₹150.00</p></span>
</div>
</div>
</div>

You have to use the event object and the attribute target:
for (index = 0; index < images.length; index++) {
images[index].addEventListener('mouseover', (event) => {
for (const iterator of options) {
event.target.style.display = 'inline-block'; // Use event.target
}
});
}

How to make star rating based on percentage shown in image?

Im trying to create star rating based on score or percentage. I have created codepen for inline stars. But don't understand how to do for stars shown in image. Stars should not be inline, they should formed a triangle.
Will you please help me with that.
and my codepen link
/*---------- general ----------*/
body {
background: #ff7070;
color: #F3FCF0;
font-family: sans-serif;
text-align: center;
}
/*---------- star rating ----------*/
%flex-display {
display: flex;
}
.star-rating {
#extend %flex-display;
align-items: center;
font-size: 3em;
justify-content: center;
margin-top: 50px;
}
.back-stars {
#extend %flex-display;
color: #bb5252;
position: relative;
text-shadow: 4px 4px 10px #843a3a;
}
.front-stars {
#extend %flex-display;
color: #FFBC0B;
overflow: hidden;
position: absolute;
text-shadow: 2px 2px 5px #d29b09;
top: 0;
}
<script src="https://use.fontawesome.com/f4e64b7c17.js"></script>
<div class="star-rating">
<div class="back-stars">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>>
<div class="front-stars" style="width: 70%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</div>
</div>
Thanks in advance.

You are missing left:0 in .front-stars class
Sometime browsers render absolute element using left 0 some time not, So we should always mention combination of two at least( from left right top bottom)
Thanks

Preventing apperance of jumping when fading elements in and out

Objective
Make it so that the text is the only thing that fades in and out, while the containers that hold the text have a fixed height to remove the apperance of text jumping
Remove any duplication of code in scripts.js especially with all the let statements
Codepen: http://codepen.io/onlyandrewn/pen/NbdGrg
Problem
I have a series of panels and on button click of either btn--previous or btn--next you get shown the next panel in the series .panel--one, .panel--two, the old one fades out and the new one fades in. However, when fading elements in and out the text appears to jump.
scripts.js
// Complete
function completeStepOne() {
$(".circle--one").removeClass("is-selected");
$(".check--one").removeClass("is-hidden");
$(".text--one").addClass("is-strikethrough");
$(".circle--one").addClass("is-completed");
$(".number--one").addClass("is-hidden");
$(".circle--two").addClass("is-selected");
$(".text--two").removeClass("is-grey");
}
function completeStepTwo() {
$(".circle--two").removeClass("is-selected");
$(".check--two").removeClass("is-hidden");
$(".text--two").addClass("is-strikethrough");
$(".circle--two").addClass("is-completed");
$(".number--two").addClass("is-hidden");
$(".circle--three").addClass("is-selected");
$(".text--three").removeClass("is-grey");
}
function completeStepsOneTwo() {
$(".circle--one, .circle--two").removeClass("is-selected");
$(".check--one, .check--two").removeClass("is-hidden");
$(".text--one, .text--two").addClass("is-strikethrough");
$(".circle--one, .circle--two").addClass("is-completed");
$(".number--one, .number--two").addClass("is-hidden");
$(".circle--three").addClass("is-selected");
$(".text--three").removeClass("is-grey");
}
// Incomplete
function incompleteStepTwo() {
$(".number--one").removeClass("is-hidden");
$(".circle--one").addClass("is-selected");
$(".text--one").removeClass("is-strikethrough");
$(".circle--two").removeClass("is-selected");
$(".text--two").addClass("is-grey");
$(".check--one").addClass("is-hidden");
}
function incompleteStepThree() {
$(".number--two").removeClass("is-hidden");
$(".circle--two").addClass("is-selected");
$(".circle--two").removeClass("is-completed");
$(".check--two").addClass("is-hidden");
$(".text--two").removeClass("is-strikethrough");
$(".circle--three").removeClass("is-selected");
$(".text--three").addClass("is-grey");
}
function incompleteStepsOneTwo() {
$(".number--one, .number--two").removeClass("is-hidden");
$(".circle--one").addClass("is-selected");
$(".circle--two").removeClass("is-completed");
$(".check--one, .check--two").addClass("is-hidden");
$(".text--one, .text--two").removeClass("is-strikethrough");
$(".circle--two, .circle--three").removeClass("is-selected");
$(".text--two, .text--three").addClass("is-grey");
}
// Show panels
function showPanelOne() {
$(".inner--one").fadeIn();
$(".inner--one").removeClass("is-hidden");
// Hide panels two and three
$(".inner--two").fadeOut();
$(".inner--two").addClass("is-hidden");
$(".inner--spend").fadeOut();
$(".inner--spend").addClass("is-hidden");
}
function showPanelHim() {
$(".panel--him").fadeIn();
$(".inner--him").fadeIn();
$(".panel--him").removeClass("is-hidden");
$(".inner--him").removeClass("is-hidden");
// Hide panels one and three
$(".inner--one").fadeOut();
$(".inner--one").addClass("is-hidden");
$(".inner--spend").fadeOut();
$(".inner--spend").addClass("is-hidden");
}
function showPanelHer() {
$(".panel--her").fadeIn();
$(".inner--she").fadeIn();
$(".panel--her").removeClass("is-hidden");
$(".inner--she").removeClass("is-hidden");
// Hide panels one and three
$(".inner--one").fadeOut();
$(".inner--one").addClass("is-hidden");
$(".inner--spend").fadeOut();
$(".inner--spend").addClass("is-hidden");
}
function showPanelAnyone() {
$(".panel--anyone").fadeIn();
$(".inner--anyone").fadeIn();
$(".panel--anyone").removeClass("is-hidden");
$(".inner--anyone").removeClass("is-hidden");
// Hide panels one and three
$(".inner--one").fadeOut();
$(".inner--one").addClass("is-hidden");
$(".inner--spend").fadeOut();
$(".inner--spend").addClass("is-hidden");
}
function showPanelThree() {
$(".panel--three").fadeIn();
$(".inner--spend").fadeIn();
$(".panel--three").removeClass("is-hidden");
$(".inner--spend").removeClass("is-hidden");
// Hide panels one and two
$(".inner--one").fadeOut();
$(".inner--one").addClass("is-hidden");
$(".inner--two").fadeOut();
$(".inner--two").addClass("is-hidden");
}
$(".btn--next").on("click", function(){
// Progress bar circles
let circleOneSelected = $(".circle--one").hasClass("is-selected");
let circleTwoSelected = $(".circle--two").hasClass("is-selected");
let circleThreeSelected = $(".circle--three").hasClass("is-selected");
// Panel One options
let giftsforHimSelected = $(".btn--option-him").hasClass("is-selected");
let giftsforHerSelected = $(".btn--option-her").hasClass("is-selected");
let giftsforKidsSelected = $(".btn--option-kids").hasClass("is-selected");
let giftsforAnyoneSelected = $(".btn--option-anyone").hasClass("is-selected");
// Panel Two options
let typeHimJewelry = $(".btn--option-him-jewelry").hasClass("is-selected");
let typeHimScarves = $(".btn--option-him-scarves").hasClass("is-selected");
let typeHimFishing = $(".btn--option-him-fishing").hasClass("is-selected");
let typeHimCologne = $(".btn--option-him-cologne").hasClass("is-selected");
let typeHimShirts = $(".btn--option-him-shirts").hasClass("is-selected");
let typeHimSports = $(".btn--option-him-sports").hasClass("is-selected");
// Panel Three options
let under25 = $(".btn--option-25").hasClass("is-selected");
let under50 = $(".btn--option-50").hasClass("is-selected");
let under75 = $(".btn--option-75").hasClass("is-selected");
let under100 = $(".btn--option-100").hasClass("is-selected");
let under250 = $(".btn--option-u250").hasClass("is-selected");
let over250 = $(".btn--option-o250").hasClass("is-selected");
let btnLikeSelected = $(".btn--like").hasClass("is-selected");
if (circleOneSelected) {
if (giftsforHimSelected) {
completeStepOne();
showPanelHim();
} else if (giftsforHerSelected) {
completeStepOne();
showPanelHer();
} else if (giftsforKidsSelected) {
completeStepsOneTwo();
showPanelThree();
} else if (giftsforAnyoneSelected) {
completeStepOne();
showPanelAnyone();
}
}
if (circleTwoSelected && btnLikeSelected) {
completeStepTwo();
showPanelThree();
}
if (circleThreeSelected && btnSpendSelected) {
// Do action
}
});
$(".btn--previous").on("click", function(){
// Progress bar circles
let circleOneSelected = $(".circle--one").hasClass("is-selected");
let circleTwoSelected = $(".circle--two").hasClass("is-selected");
let circleThreeSelected = $(".circle--three").hasClass("is-selected");
// Panel One options
let giftsforHimSelected = $(".btn--option-him").hasClass("is-selected");
let giftsforHerSelected = $(".btn--option-her").hasClass("is-selected");
let giftsforKidsSelected = $(".btn--option-kids").hasClass("is-selected");
let giftsforAnyoneSelected = $(".btn--option-anyone").hasClass("is-selected");
// Panel Two options
let typeHimJewelry = $(".btn--option-him-jewelry").hasClass("is-selected");
let typeHimScarves = $(".btn--option-him-scarves").hasClass("is-selected");
let typeHimFishing = $(".btn--option-him-fishing").hasClass("is-selected");
let typeHimCologne = $(".btn--option-him-cologne").hasClass("is-selected");
let typeHimShirts = $(".btn--option-him-shirts").hasClass("is-selected");
let typeHimSports = $(".btn--option-him-sports").hasClass("is-selected");
// Panel Three options
let under25 = $(".btn--option-25").hasClass("is-selected");
let under50 = $(".btn--option-50").hasClass("is-selected");
let under75 = $(".btn--option-75").hasClass("is-selected");
let under100 = $(".btn--option-100").hasClass("is-selected");
let under250 = $(".btn--option-u250").hasClass("is-selected");
let over250 = $(".btn--option-o250").hasClass("is-selected");
let btnLikeSelected = $(".btn--like").hasClass("is-selected");
let btnHimSelected = $(".btn--him").hasClass("is-selected");
if (circleOneSelected) {
}
if (circleTwoSelected) {
incompleteStepTwo();
showPanelOne();
}
if (circleThreeSelected) {
if (giftsforHimSelected) {
incompleteStepThree();
showPanelHim();
} else if (giftsforHerSelected) {
incompleteStepThree();
showPanelHer();
} else if (giftsforKidsSelected) {
incompleteStepsOneTwo();
showPanelOne();
} else if (giftsforAnyoneSelected) {
incompleteStepThree();
showPanelAnyone();
}
}
});
index.html
<!-- Panel One -->
<div class="panel panel--one">
<div class="advertising advertising--horizontal">
<img src="http://placehold.it/720x90">
</div>
<section class="panel__progress">
<ul>
<li>
<div class="panel__pick">
<p class="panel__circle circle--one is-selected">
<i class="fa fa-check check--one is-hidden" aria-hidden="true"></i>
<span class="panel__number number--one">1</span>
</p>
<p class="panel__text text--one">Choose a category</p>
</div>
</li>
<li>
<div class="panel__pick">
<p class="panel__circle circle--two">
<i class="fa fa-check check--two is-hidden" aria-hidden="true"></i>
<span class="panel__number number--two">2</span>
</p>
<p class="panel__text text--two is-grey">Pick some items</p>
</div>
</li>
<li>
<div class="panel__pick">
<p class="panel__circle circle--three">
<i class="fa fa-check check--three is-hidden" aria-hidden="true"></i>
<span class="panel__number number--three">3</span>
</p>
<p class="panel__text text--three is-grey">Name your budget</p>
</div>
</li>
</ul>
</section> <!-- .panel__progress -->
<div class="test">
<div class="panel__inner inner--one">
<div class="panel__info">
<h2 class="panel__title">Who is the gift for?</h2>
<h3 class="panel__instructions pick--one">Pick one of the options below</h3>
<!-- <h3 class="panel__instructions">Eeny, meeny, miny, moe</h3> -->
</div>
<div class="button__group group--quarter">
<button class="btn btn--option btn--option-him btn--who">Gifts for him <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-her btn--who">Gifts for her <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-kids btn--who">Gifts for kids <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-anyone btn--who">Gifts for anyone <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
</div>
<div class="button__group button__controls">
<button class="btn btn--previous previous--one"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
<button class="btn btn--next next--one">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div> <!-- .panel__inner -->
</div>
</div> <!-- .panel .panel--one -->
<!-- Panel Two -->
<!-- Gifts for Him -->
<div class="panel panel--two panel--him is-hidden">
<div class="test">
<div class="panel__inner inner--two inner--him">
<div class="panel__info">
<h2 class="panel__title">What are some things he might like?</h2>
<h3 class="panel__instructions pick--three">Pick three items below to help us narrow your search</h3>
</div>
<div class="button__group">
<button class="btn btn--option btn--option-him-jewelry btn--like">Jewelry <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-him-scarves btn--like">Scarves <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-him-fishing btn--like">Fishing <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-him-cologne btn--like">Cologne <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-him-shirts btn--like">Shirts <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-him-sports btn--like">Sports apparel <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
</div>
<div class="button__group button__controls">
<button class="btn btn--previous previous--two"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
<button class="btn btn--next next--two">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div> <!-- .panel__inner -->
</div> <!-- .test -->
</div> <!-- .panel .panel--two -->
<!-- Panel Two -->
<!-- Gifts for Her -->
<div class="panel panel--two panel--her is-hidden">
<!-- <div class="advertising advertising--horizontal">
<img src="http://placehold.it/720x90">
</div> -->
<div class="panel__inner inner--two inner--she">
<div class="panel__info">
<h2 class="panel__title">What are some things she might like?</h2>
<h3 class="panel__instructions pick--three">Pick three items below to help us narrow your search</h3>
</div>
<div class="button__group">
<button class="btn btn--option btn--like">Cashmere <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Perfume <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Scarves <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Sweaters <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Beauty <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Candles <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Necklaces <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Sports jewelry <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Watches <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
</div>
<div class="button__group button__controls">
<button class="btn btn--previous previous--two"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
<button class="btn btn--next next--two">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div> <!-- .panel__inner -->
</div> <!-- .panel .panel--two -->
<!-- Panel Two -->
<!-- Gifts for Anyone -->
<div class="panel panel--two panel--anyone is-hidden">
<!-- <div class="advertising advertising--horizontal">
<img src="http://placehold.it/720x90">
</div> -->
<div class="panel__inner inner--two inner--anyone">
<div class="panel__info">
<h2 class="panel__title">What are some things they might like?</h2>
<h3 class="panel__instructions pick--three">Pick three items below to help us narrow your search</h3>
</div>
<div class="button__group">
<button class="btn btn--option btn--like">Cookbooks <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Spirits <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Suitcases / bags <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Food<i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Gardening <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Gadgets <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Made in St. Louis <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Gifts that give back <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Fitness <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Subscriptions <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Ornaments <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Pets <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Personalized <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Other <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like is-hidden"> <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
</div>
<div class="button__group button__controls">
<button class="btn btn--previous previous--two"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
<button class="btn btn--next next--two">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div> <!-- .panel__inner -->
</div> <!-- .panel .panel--two -->
<!-- Panel Three -->
<div class="panel panel--three is-hidden">
<!-- <div class="advertising advertising--horizontal">
<img src="http://placehold.it/720x90">
</div> -->
<div class="panel__inner inner--spend">
<div class="panel__info">
<h2 class="panel__title">How much do you want to spend?</h2>
<h3 class="panel__instructions pick--one">Pick one of the options below</h3>
<!-- <h3 class="panel__instructions">Remember, it's the thought that counts</h3> -->
</div>
<div class="button__group">
<button class="btn btn--option btn--option-25 btn--spend">Under $25 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-50 btn--spend">Under $50 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-75 btn--spend">Under $75 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-100 btn--spend">Under $100 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-u250 btn--spend">Under $250 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-o250 btn--spend">$250 and over <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
</div>
<div class="button__group button__controls">
<button class="btn btn--previous previous--three"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
<button class="btn btn--next next--three">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div> <!-- .panel__inner -->
</div> <!-- .panel .panel--three -->
app.css
/*----------------------------------
BUTTONS
----------------------------------*/
.button__group {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 75%;
margin-top: 15px;
margin-bottom: 15px;
margin: 0 auto;
padding-left: 30px;
}
.button__group.group--quarter {
width: 50%;
}
.button__controls {
margin-top: 60px;
margin-bottom: 60px;
}
button {
display: block;
margin-top: 15px;
margin-bottom: 15px;
padding: 20px;
padding-right: 60px;
padding-left: 60px;
cursor: pointer;
text-align: left;
border: none;
background: #ffffff;
}
.btn--previous,
.btn--next,
.btn--buy,
.btn--all,
.btn--recommend,
.btn--option {
text-transform: uppercase;
border-radius: 3px;
font-family: "Roboto", sans-serif;
font-size: 1.4rem;
font-weight: 700 !default;
}
.btn--previous,
.btn--next {
display: inline;
margin-right: 30px;
min-width: 225px;
text-align: center;
}
.btn--all,
.btn--recommend,
.btn--option {
border: 1px solid #aaaaaa;
}
.btn--previous {
color: #c62828;
border: 1px solid #c62828;
}
.btn--previous .fa-long-arrow-left {
color: #c62828;
}
.btn--all,
.btn--recommend,
.btn--option {
font-weight: 400;
text-transform: none;
color: #212121;
display: inline-block;
margin-right: 30px;
min-width: 225px;
min-height: 75px;
border-bottom: 2px solid #aaaaaa;
}
.btn--all,
.btn--recommend {
background: #c62828;
border: none;
color: #fff;
font-weight: 700;
text-align: center;
}
.btn--all:hover,
.btn--recommend:hover {
background: #990000;
border: none;
}
.btn--option {
text-align: left;
padding-left: 30px;
min-width: 260px;
min-height: 75px;
font-size: 1.6rem;
}
.btn--option.is-selected {
border: 2px solid #c62828;
color: #c62828;
}
.btn--option .fa-check {
color: #c62828;
float: right;
position: relative;
right: -40px;
top: -1px;
}
.btn--option .fa-check.is-grey {
color: #e7e7e7;
}
.btn--option .fa-check.is-red {
color: #c62828;
}
.btn--sidebar {
font-weight: 400;
text-transform: none;
margin: 0;
font-size: 1.6rem;
padding-left: 15px;
font-family: "Roboto";
background: transparent;
color: #212121;
margin-top: 15px;
padding-top: 5px;
padding-bottom: 5px;
}
.btn--sidebar:hover {
color: #aaaaaa;
color: #ccc;
}
.btn--next,
.btn--buy {
color: #ffffff;
border: none;
background: #c62828;
}
.btn--buy {
margin: 0;
width: 100%;
text-align: center;
margin-top: 15px;
text-decoration: none;
}
.btn--buy:visited {
text-decoration: none;
}
.btn--view {
border: none;
margin-bottom: 0;
}
.btn--view:hover {
color: #212121;
}
.btn--next {
border-bottom: 2px solid #990000;
}
.btn--next:hover {
background: #990000;
transition: 0.2s;
}
/* Custom query */
#media (max-width: 1250px) {
.button__group {
width: 80%;
}
.button__group.group--quarter {
width: 70%;
}
}
/* Large devices */
#media (max-width: 1200px) {
.button__group {
width: 90%;
}
}
/* Large devices */
#media (max-width: 1024px) {
.button__group {
width: 100%;
}
.button__group.group--quarter {
width: 85%;
}
}
/* Medium devices */
#media (max-width: 768px) {
.button__group {
width: 100%;
}
.button__group.group--quarter {
width: 100%;
}
}
/* Medium devices */
/* Small devices */
#media (max-width: 480px) {
.btn--option {
min-width: 275px;
}
.btn--all,
.btn--recommend {
min-width: 275px;
}
}
/*----------------------------------
LIST
----------------------------------*/
ul {
padding: 0;
}
ul li {
display: inline-block;
margin-right: 15px;
text-align: center;
}
.panel {
width: 100%;
height: 100%;
position: relative;
}
.panel.is-hidden {
display: none;
}
.panel__progress {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.panel__circle {
width: 50px;
height: 50px;
margin: 0 auto;
padding: 15px;
border: 1px solid #aaaaaa;
border-radius: 50%;
font-size: 1.6rem;
font-weight: 300 !default;
}
.panel__circle.is-selected {
color: #ffffff;
border: none;
background: #c62828;
}
.panel__circle.is-completed {
border: 1px solid #c62828;
}
.panel__circle.is-completed .fa-check {
color: #c62828;
}
.panel__text {
font-family: "Roboto", sans-serif;
font-size: 1.4rem;
}
.panel__number {
position: relative;
top: -22px;
}
.panel__number.is-hidden {
display: none;
}
.panel__pick {
padding: 15px;
text-align: center;
}
.panel__title {
font-family: "Merriweather";
font-weight: 900;
text-transform: none;
margin-top: 30px;
font-size: 4rem;
}
.panel__instructions {
text-align: center;
font-weight: 400;
font-family: "Open Sans";
font-size: 1.8rem;
color: #aaaaaa;
margin: 0;
margin-top: 15px;
margin-bottom: 30px;
}
/* Large devices */
/* Large devices */
/* Custom query */
#media (max-width: 875px) {
.panel__title {
width: 80%;
margin: auto;
margin-top: 30px;
}
}
/* Medium devices */
/* Medium devices */
#media (max-width: 640px) {
.panel__circle,
.panel__text {
display: none;
}
}
/* Small devices */
#media (max-width: 480px) {
.panel__title {
font-size: 3.5rem;
}
}

use combination of transition and visibility in CSS
.element {
visibility:hidden;
opacity:0;
transition:opacity 0.5s linear;
}
.element.is-selected {
visibility:visible;
opacity:1;
}