Interesting problem! It always boils down to your structure. Also to achieve something like this you should rely on targeting classes rather than elements.
OK, so you have a task of, say, showing all the photos while clicking on the “photo” button. The solution to the problem of the second click is to have all those images disappear again when you click any other button (this way photos are “re-initialized” and are back at where you need them (they should be hidden), for the first click on the “photo” button to do something).
Currently you are doing the first click action the hard way, manually selecting each and every photo on the page, make it to appear, increasing opacity. This is inefficient.
Give each of your photo links same class (they will become the same so remove the background image, which will be inserted differently in step two)
Insert divs with different photo backgrounds inside these links (those with the same class)
Now create an interaction where on first click you target the photolinks class rather than every single element with the photo. Make this class appear as you need and disappear on second click. You will need to add something else to this interaction but to make things more clear you will do it later.
Now do the same for other buttons but add one simple thing to the “first click” interaction - add disappearing of the photo links class into this first action! This way when you click other buttons the first click will remove the photos while revealing other necessary elements.
And last add the same disappearing of other elements that appear on click for other buttons (elements like “interview” and “data”, that should be organized the same as photo links - same class for each with different content divs inside), to the photo button’s “first click” interaction
This was a lot of text but hopefully you’ve got the gist of the idea and will be able to work from here.
Let me know how it went!