Same div/card, but different content/results when clicked

I Need Help
1

Hello,
There are two questions I would like to ask:

  1. I am trying to make a “+” icon turn into an “x” when clicked for rotation. In my understanding, it was necessary to implement the following: ‘rotate’ CSS code triggered on click; however, I have little experience with CSS, so I do not know how to execute it :man_facepalming:t2:
  2. I would like to have a picture on a div/card (?) become full text with a different background (like Apple). Could you please explain how to do it?
    Example: macOS Ventura - Apple
    I think I should be using ‘: hover’ or ‘: active’, but I cannot achieve this.

Basically, I would like to reproduce this type of work
Apple Website

Thank you very much for your assistance.

2

I have yet to incorporate the feature of changing the background, but I am making progress towards it. :sunglasses:

Small Potato Ltd 2023-05-06 at 10.40.24

2 Likes
3

Although it is relativily straightforwards to make, there is a bit involved, and understanding HTML and CSS is a a big help. You have to start with the right structure.

  1. Main wrapping element.
  2. Bottom element, which it transitions to.
  3. Top element you start with.
  4. The button that triggers the transition.

The main wrapper, you need to set a position of relative. The front and back a position of absolute so everything sits stacked.

The button needs to also be positioned and for it to call a javascript function, you can either do that inline, or with an event listener, which is what I would do if you were going to have multiples.

This function will make it all work. Many ways to do this, but the easiest… you could use the javascript to add a class to the main wrapping element, and then add CSS based on that class, for example adding a class called “.reveal”.

eg

.main-wrapper .top-element {
  opacity: 1;
  transition: opacity 300ms linear;
}

.main-wrapper .tigger-button {
  transform: rotate(0deg);
  transition: transform 300ms linear;
}

.main-wrapper.reveal .top-element {
  animation: fade-out 300ms linear forwards;
}

.main-wrapper.reveal .tigger-button {
  animation: rotate-button 300ms linear forwards;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes rotate-button {
  from { transform: rotate(0deg); }
  to { transform: rotate(45deg); }
}

EDIT: I see Jerry posted while I wrote this.

3 Likes
4

I’m using Javascript (Thanks Wes Bos for teaching me :innocent:)
It might be the tourist route to get there but hey, it works :upside_down_face:

document.addEventListener('DOMContentLoaded', function () {
    const changeContentBtn = document.querySelector('.change-content-btn');
    const cardContents = document.querySelectorAll('.card-content');

    changeContentBtn.addEventListener('click', function () {
        changeContentBtn.classList.toggle('rotated');

        const currentContent = document.querySelector('.card-content.current');
        const hiddenContent = document.querySelector('.card-content.hidden');

        currentContent.style.transition = 'opacity 0.5s';
        currentContent.style.opacity = 0;

        setTimeout(() => {
            currentContent.classList.remove('current');
            currentContent.classList.add('hidden');
        }, 500);

        setTimeout(() => {
            hiddenContent.style.transition = 'none';
            hiddenContent.style.opacity = 0;
            hiddenContent.classList.remove('hidden');
            setTimeout(() => {
                hiddenContent.style.transition = 'opacity 0.5s';
                hiddenContent.style.opacity = 1;
            }, 50);
        }, 500);

        setTimeout(() => {
            hiddenContent.classList.add('current');
        }, 1000);
    });
});
</script>
1 Like
5

My Javascript would be something like this…

const triggerButtons = document.querySelectorAll('.trigger-button');
triggerButtons.forEach(button => {
  button.addEventListener('click', () => {
    const mainWrapper = button.closest('.main-wrapper');
    mainWrapper.classList.add('reveal');
  });
});
6

Point noted. I’ll go back to my corner and play with puppies :dog::dog::dog::rofl:

7

You can do a lot by adding a single class to an entire element.

1 Like
8

I wished we had an option for :rofl: and not just :heart: