Hide and show elements using css

I am making my first steps learning html, css and php. I made some courses on internet and now I decided to make a site using Wordpress so I can continue learning from the practice.

The thing is that I made a page with a custom field for a video and a custom field for a description.

As you can see in the picture I'm hiding all the text of the description using a details tag called About in html.

When I click on about I see this:

And there is my question: How can I hide some elements when other elements are displayed? I would like to open this page and only see the text and a close button. It means that when details is open, the page should not display the "menu" link and the "strange magic" title.

I already tryied this but it doesn't work:

details[open] .entry-title .menu-toggle{
    display: none;
} 

Do you have some suggestion? It is something possible to do using css?