How can I build a filter option to view only specific content on my website, text and image?

Ok so my question might be a bit vague so here is some detail:

The project is an e-learning project.

Now let us say we have 2 Units of a subject say astronomy. Each unit will have 10 topics. Each topic will have things like:

• Introduction
• Description
• Explanation
• Illustrative diagrams etc

Now the user should be able to filter out anything and the website should display the relevant content in a very neat and presentable manner.

For ex: If the user selects Unit 1 and then selects Topic 3 and clicks on GO, only the filtered content must be shown. If the user selects Unit 1 and only selects Illustrative diagrams, all the diagrams from the Unit 1 alone will be shown.

This is like advanced indexing to the most granular level.

I understand that introductions, explanations etc are all in text format and illustrative diagrams are in jpeg or any image format.

How can I do this in an elegant way and can someone explain the logic?

Thanks!!