Scroll Interaction Problem - Conflicting Interactions

Design help Animations & Interactions
1

Hi guys! I have a problem with making the interaction work on the Blog Post Template page. Maybe it needs custom JS code, I’m not sure.

I have two main interactions on this page: 1) Click - ToC button that reveals/hides the ToC contents and 2) Page scrolled - reveals the popup under the ToC and hides the ToC .
However, when they work together, three issues appear:

  1. When I click on the ToC button before the popup appears, it hides both the button and the ToC contents;

  2. When the popup appears, I need to double-click the ToC button to reveal ToC contents.

  3. When the popup appears and I open ToC, it disappears automatically for some reason.

I’ve tried everything, but can’t seem to find a solution. Maybe there’s a better way to create this interaction? Any help will be much-much appreciated!