Breaking News: Grepper is joining You.com. Read the official announcement!

see more button on only mobile with gradient

Doyin Atobaru answered on November 19, 2024 Popularity 1/10 Helpfulness 1/10

answer see more button on only mobile with gradient

see more button on only mobile with gradient

Comment

const [descExpanded, setDescExpanded] = useState(false);
  const [detailsExpanded, setDetailsExpanded] = useState(false);


<section
        className={`rounded-xl space-y-5 text-gray-500 max-xs:text-xs relative transition-all duration-500 ease-in-out ${
          descExpanded ? 'max-h-full' : 'max-h-[200px] overflow-hidden'
        } sm:max-h-full`}
      >

</section>

  {/* Toggle Button */}
        <div className="absolute bottom-0 left-0 w-full bg-gradient-to-t from-gray-400 via-gray-400/50 to-transparent
 sm:hidden">
          <div className="flex justify-center p-2">
            <Button
              onClick={() => setDescExpanded(prev => !prev)}
              variant="outline"
              className="bg-muted border-none font-bold text-gray-700 p-0 h-8 w-auto px-4 rounded-full text-xs shadow-none"
            >
              {descExpanded ? 'See Less' : 'See More'}
            </Button>
          </div>
        </div>

Popularity 1/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: button gradient html mobile

Link to this answer
Share Copy Link

Contributed on Nov 19 2024

Doyin Atobaru

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

see more button on only mobile with gradient

Contents

More Related Answers

see more button on only mobile with gradient

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.