I have a page (pageA) with 7 projects. all projects have a More Details button. I have another page (pageB) with those 7 project's details in seperate sections. When the More Details Button is clicked on pageA I want it to navigate to pageB and show a particular section, and the other section's should be hidden. Can please someone guide me?

CodePudding user response：

I imagine your particular sections in something like accordions. My approach would be :

• Hide more-details-section parts by default (pageB)
• Add IDs to your projects (pageB)
• Specify in your more-details links the id (pageA, like pageB#project1)
• Get the ID from the url to toggle the concerned more-details-section accordion (pageB)

CodePudding user response：

You can pass a prop as the project Id of which project details have been clicked.
In next step on page B apply conditional operator in which to show the section which satisfy the requirement props.project_Id==project_Id.

{props.project_Id==project_Id && <div></div>}
{props.project_Id==project_Id && <div></div>}
{props.project_Id==project_Id && <div></div>}
{props.project_Id==project_Id && <div></div>}
{props.project_Id==project_Id && <div></div>}
{props.project_Id==project_Id && <div></div>}
{props.project_Id==project_Id && <div></div>}