Incorporating four div cards functioning as buttons to collapse and expand information beneath the card row has resulted in unexpected behavior. Clicking on one card should expand its information while collapsing the previously expanded card, but the implementation seems to be stacking the information instead of collapsing the first card and expanding the second. Despite researching and finding a related question with a provided answer, the implemented solution does not resolve the issue. Can anyone assist in identifying the problem? Reference the answered question here.
Below is the answer from the referenced post, integrated into the code but not functioning properly.
Review the screen capture of the answer for additional context.
Attempts to implement other solutions have also been unsuccessful. The code in question is as follows:
p, h1 {
font-family: 'Droid Sans', sans-serif;
}
...