I am facing an issue with toggling a div by clicking on text within a toggle bar. I am in the process of recreating a WordPress website template in React JS that was originally built using bootstrap. You can view the original template here.
So far, I have successfully recreated all sections using simple HTML and CSS and rendered them using React's class method (although I plan to switch to function as there is no state involved). However, I have reached a section (the "get directions to event hall" section, second last) where there is a navigation bar that animates, switches the displayed data, and changes the active heading along with a small pointer beneath it. The image below illustrates this:
https://i.sstatic.net/L8Dn4.jpg
By default, the "Venue" heading is active. Clicking on either "Time" or "How to get there" should update the pink pointer position and change its size accordingly. Furthermore, clicking on any of these headings should animate the switch between the content underneath (even though currently, they show the same text).
To achieve this functionality while retaining the current active heading, here is the relevant code snippet:
import React,{Component} from 'react'
class Directions extends Component{
render(){
return(
<section id = "Directions-section">
<div id = "directions-div">
<div id="directions-text">
...
</div>
</section>
)
}
This code represents one instance of the div structure. I intend to duplicate this for each heading and apply the recommended approach.
The corresponding CSS:
#Directions-section
{
...
}
#directions-div
{
...
}
...
P.S: Bootstrap was omitted initially due to a misunderstanding, and integrating it later caused disruptions after months of effort!
Edit: Additionally, I require text changes and animations upon clicking different headings.