Question 245060 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Show more/Show less form with div's inside in NextJS

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?

Example 1:
exmpl-1

Example-2:
exmpl-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
Tags:

2

Answers


  1. 0

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

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

    Login or Signup to reply.
  2. 0

    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.

    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>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search