So I have a page that describes the amenities in the hotel, how I can create a hidden block of amenities that can be expanded by pressing the "Show more amenities" button and collapsed by pressing "Show less amenities" in NextJS with tailwind-css?

所以我有一个页面描述了酒店的便利设施，我如何创建一个隐藏的便利设施块，可以通过按下“显示更多便利设施”按钮来扩展，并通过使用顺风-css在NextJS中按下“显示更少便利设施”来折叠？

Example 1:

例1：

Example-2:

示例2：

Here's a part of the code:

以下是代码的一部分：

'use client'

import Image from 'next/image'

import { useState, useEffect } from "react";

export default function Lodge() {

    return (
        <div className="w-full h-[8964px] bg-white shadow-sm">

            <div className="grid grid-cols-2 gap-4">

                ...

                        <div className="text-[28px] font-medium leading-normal text-[#313131] underline flex flex-row gap-5 py-16 cursor-pointer">
                            Show more amenties
                            <Image
                                src="/images/icon down.svg"
                                alt="icon-down"
                                width={26}
                                height={26}
                            />
                        </div>

                        <div className="grid grid-cols-2 gap-4">

                            <div className="">
                                <div className="text-[32px] font-bold leading-normal text-[#313131]">
                                    Heating & Cooling
                                    <div className="text-[24px] font-medium leading-normal text-[#313131] flex flex-row items-end gap-5">
                                        <Image
                                            src="/images/lodge/fan icon.svg"
                                            alt="fan-icon"
                                            width={40}
                                            height={40}
                                        />
                                        Portable fans
                                    </div>
                                </div>

                                <div className="text-[32px] font-bold leading-normal text-[#313131]">
                                    Internet & Working
                                    <div className="text-[24px] font-medium leading-normal text-[#313131] flex flex-row items-end gap-5">
                                        <Image
                                            src="/images/lodge/wifi icon.svg"
                                            alt="wifi-icon"
                                            width={40}
                                            height={40}
                                        />
                                        WI-FI
                                    </div>
                                    <div className="text-[24px] font-medium leading-normal text-[#313131] flex flex-row items-end gap-5">
                                        <Image
                                            src="/images/lodge/desk icon.svg"
                                            alt="desk-icon"
                                            width={40}
                                            height={40}
                                        />
                                        Working zone
                                    </div>
                                </div>
                             
... etc

You can use the following example in order to show and hide the element in react js. In here all you need is the usestate hook to do it at once.

您可以使用以下示例来显示和隐藏reaction js中的元素。在这里，你所需要的只是一次完成这项工作的美国地产挂钩。

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

export default function App() {
  const [name, setName] = useState(false);

  const toggle = () => {
    setName(!name);
  };

  return (
    <div className="App">
      <h1 onClick={toggle}>Click me to show/hide the element</h1>

      {name ? <h2>Start editing to see some magic happen!</h2> : null}
    </div>
  );
}

Add/remove the Tailwind CSS hidden class on click to hide/show the specific content. This changes the display to none.

单击以隐藏/显示特定内容来添加/删除Tailw css隐藏类。这会将显示更改为None。

If you want to change the visibility to hidden instead, use the invisible class.

如果要将可见性更改为隐藏，请使用不可见类。

I solved it in the following way:

我用以下方式解决了这个问题：

Added a separate conditions to each "Show more/show less" condition:

为每个“显示更多/显示更少”条件添加了单独的条件：

export default function Lodge() {

    const [showAmenities, setShowAmenities] = useState(false); /*amenties*/
    const [showText, setShowText] = useState(false); /*text*/
    const [showRText, setRShowText] = useState(false); /*reviews*/
    const [showLText, setLShowText] = useState(false); /*location*/
    const [showLsText, setLsShowText] = useState(false); /*location second*/

    return (
       ...
  )
}

Then wrapped my hidden elements this way:

然后这样包装我的隐藏元素：

<div className={`${showAmenities ? '' : 'hidden'}
   ...
</div>

And added the buttons below:

并添加了以下按钮：

{/* Show more button */}
<button onClick={() => setShowAmenities(true)} 
    className={`text-[28px] font-medium leading-normal text-[#313131] underline flex flex-row gap-5 pt-10 
    ${showAmenities ? 'hidden' : ''}`}>
    Show more amenities
    <Image src="/images/icon down.svg" alt="icon-down" width={26} height={26}/>
</button>

{/* Show less button */}
<button onClick={() => setShowAmenities(false)} 
    className={`text-[28px] font-medium leading-normal text-[#313131] underline flex flex-row gap-5 pt-10
    ${showAmenities ? '' : 'hidden'}`}>
    Show less amenities
    <Image src="/images/icon up.svg" alt="icon-up" width={26} height={26} />
</button>