Hey there, can you take a moment to click on this link and check out the GIF? I'm trying to replicate the same user interface using ReactJs. The goal is to toggle the visibility of sibling p elements with a single click among them. Below is the code snippet along with the result available at this link https://codesandbox.io/s/vkij6. Your assistance in creating a UI similar to the GIF would be greatly appreciated. Thank you in advance.
Below is the code snippet:
App.js
import Toggle from './components/Toggle';
const cities = [
{
name: "Mysuru",
about: "Mysore (or Mysuru), a city in India's southwestern Karnataka state, was the capital of the Kingdom of Mysore from 1399 to 1947. In its center is opulent Mysore Palace, seat of the former ruling Wodeyar dynasty."
},
...
];
function App() {
return (
<div className="App">
<div className="toggle-container">
<div className="cities">
{cities.map((city) => (
<Toggle key={city.name.toString()} city={city} />
))}
</div>
</div>
</div>
);
}
export default App;
Toggle.js
export default function Toggle({ city }) {
const [toggle, setToggle] = useState(false);
const handleClick = () => {
setToggle(!toggle)
}
return (
<>
<p className="city-name" onClick={handleClick}>{city.name}</p>
<p className={toggle ? "city-about-show" : "city-about-hide"}>{city.about}</p>
</>
)
}
style.css
.App {
background-color: #000000;
padding-top: 5px;
padding-bottom: 5px;
position: relative;
}
.toggle-container {
background-color: hsla(245, 100%, 87%, 0.521);
transition: background-color 300ms;
width: 800px;
height: 98.3vh;
margin: auto;
padding-top: 70px;
}
.cities {
background-color: rgb(243, 244, 245);
width: 450px;
margin: auto;
border-radius: 3px;
}
...