Question 284725 in Html Question posted in
Some basic documentation can be found here.

Html – when show more button is clicked then the hidden content to be shown properly

I have created a gird of image where the image at certain height is shown and remaining to be hidden and when show more button is clicked the remaining image to be seen but when the show more button is clicked the image appears faster and the height reaches later it might be due to some transition mistake which i cannot figure out.

import React , {useState} from 'react'


function Show1() {
    const [isVisible,setIsVisible] = useState(false)
    const data=[
        {name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
        {name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
        {name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
        {name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
        {name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
        {name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
        {name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
        {name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
    ]
  return (
    <div className='w-10/12 flex flex-col items-center justify-center bg-violet-500 mx-auto px-10'>
        <div className={`${isVisible ? 'max-h-52 overflow-hidden transition-all ease-in-out delay-1000 durat    ion-[2s] ': 'bg-red-400 max-h-[500px] transition-all ease-in-out delay-100 duration-[2s]'} grid grid-cols-4 gap-4 w-full  border-4`}>
            {data.map((val,i)=>{
                return <div key={i} className='w-full h-52'>
                    <div className='w-full h-full' 
                    style={{
                        backgroundImage: `url(${val.name})`,
                        backgroundPosition: "center",
                        backgroundRepeat: "no-repeat",
                        backgroundSize: "cover"
                    }}
                    ></div>
                </div>
            })}
        </div>
        <button 
        onClick={()=>setIsVisible(!isVisible)}
        className='px-5 py-2 bg-lime-300 my-6 w-fit'>
            Show more
        </button>
    </div>
  )
}

export default Show1
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    well when i changed my overflow property to clip it started working


  2. 0

    The issue you are facing with the delayed appearance of the image when clicking the "Show more" button is be related to the use of the delay-1000 class in the transition-all property. The delay value of 1000 milliseconds (1 second) causes a delay before the transition starts, which might not be the desired behavior.To resolve this issue you ave to replace delay-100 with duration 500.

     <div className='w-10/12 flex flex-col items-center justify-center bg-violet-500 mx-auto px-10'>
      <div
        className={`${
          isVisible
            ? 'max-h-52 overflow-hidden transition-all ease-in-out duration-500'
            : 'bg-red-400 max-h-[500px] transition-all ease-in-out duration-500'
        } grid grid-cols-4 gap-4 w-full border-4`}
      >
        {data.map((val, i) => (
          <div key={i} className='w-full h-52'>
            <div
              className='w-full h-full'
              style={{
                backgroundImage: `url(${val.name})`,
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'cover',
              }}
            ></div>
          </div>
        ))}
      </div>
      <button
        onClick={() => setIsVisible(!isVisible)}
        className='px-5 py-2 bg-lime-300 my-6 w-fit'
      >
        Show more
      </button>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search