CODEWITHSUNDEEP
javascripthtmlcssreactjsaccordion
Sougata Mukherjee
Sougata Mukherjee

Reputation: 603

I want a accordian-style hover on the images in ReactJS

Here I have created an application that contains 3 images. If you hover on that, it should be popping up like accordian, but now when it's popping up, it hides the rest of the images. So how to do the accordian effect means when the first image pops up, the rest of the image shrinks like in accordian, and the middle image popup should maintain the flow like the last and first images are shrunk, and the popup direction should be maintained with spread from middle to left and right, not left to right, and the right picture popup should maintain flow like right to left. So how to achieve that? If there is any suggestion to do that, can you please tell me?

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [hoveredIndex, setHoveredIndex] = useState(null);

  const imageUrls = [
    "https://images.unsplash.com/photo-1682686581551-867e0b208bd1?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    "https://images.unsplash.com/photo-1697219590638-d2db7748802e?q=80&w=1452&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    "https://images.unsplash.com/photo-1682686581427-7c80ab60e3f3?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  ];

  return (
    <div className="App">
      {imageUrls.map((imageUrl, index) => (
        <div
          key={index}
          className={`ctr-accordion ${index === hoveredIndex ? "active" : ""}`}
          onMouseEnter={() => setHoveredIndex(index)}
          onMouseLeave={() => setHoveredIndex(null)}
        >
          <div className="tab">
            <img src={imageUrl} alt={`Image ${index + 1}`} />
          </div>
        </div>
      ))}
    </div>
  );
}

and css code is

.App {
  display: flex;
}

.ctr-accordion {
  max-width: 1000px;
  width: 100%;
  height: 720px;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: space-around;
  gap: 10px;
  overflow: hidden;
  margin: 150px auto;
}

.tab {
  position: absolute;
  width: 20%;
  height: inherit;
  padding: 20px;
  cursor: pointer;
  transition: width 0.5s ease;
  border-radius: 25px;
  overflow: hidden;
}

.tab img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
  border-radius: 25px;
}

.ctr-accordion:first-child .tab {
  right: 0;
}

.ctr-accordion:last-child .tab {
  left: 0;
}

.ctr-accordion.active .tab {
  width: 93%;
  z-index: 2;
}

.ctr-accordion.active .tab img {
  z-index: 2;
}

and codesandbox like is https://codesandbox.io/p/sandbox/laughing-gauss-n4f84j?file=%2Fsrc%2FApp.js%3A10%2C39

Upvotes: 0

Views: 47

Answers (1)

Anton Palchyk
Anton Palchyk

Reputation: 66

You used the style position: absolute, the element is removed from the normal document flow, and no additional space is allocated for the element in the page layout. That is, the tab block is by itself and does not interact with other blocks in any way.

Try using flex. Remove position: absolute and all the styles associated with it.

Then add the class:

  • .ctr-accordion additional style flex: 1
  • .ctr-accordion.active style flex: 5

Also remove the styles .ctr-accordion.active .tab

Upvotes: 1

Related Questions