Make Git hide a folder when checking out a different branch

Question

I am creating a tutorial for a group of students learning React.

I want to create a separate branch for each step. Each branch will contain a solution to the previous step and instructions on how to complete the next step.

I also want to use GitHub Pages to demonstrate the outcome of each step. In order to do this, my gh-pages branch needs to have access to all the intermediate steps. I'll explain more about this below.

My plan is to create a directory for each step: Step_01/, Step_02/ and so on. I imagined that I could use .gitignore to hide the directories that are not relevant to the current step, and to how only the directory for the current step:

Step_*
!Step_XX

(where XX is the number of the current step).

This means that I can simply alter the following files in each branch:

index.js (to point render Step_XX/App) README.md (to provide instructions for the current step) .gitignore (to hide the directories for other steps

However, when I alter .gitignore to ignore Step_01/, this directory still remains visible, although changes to it are no longer tracked. I would like Git to hide it for me.

If I can get this to work, then, for my gh-pages branch, I can create an index.js file that uses react-router-dom to show a different page for each step. In the gh-pages branch, .gitignore will not ignore any of the Step_XX directories.

---

My specific question is: how can I get Git to hide a previously visible directory when the currently checked out branch contains an instruction in .gitignore not to track that directory?