CSS and hiding/showing divs when radio button checked

Question

If the radio button #my102 is checked, the div #navi102 should be visible and all other #navi??? divs should be hidden. So, if the radio button #my7 is checked, the div #navi7 s

Answer 1

1. You have errors in your html. There's , but I can't find any opening of that tag.
2. Page looks like broken. It's sooo width and empty space looks strange...

Maybe you want that, I'm just saying. That's the reason why I'll write it on simple example, not whole your code (which's hard to read and result hard to check).

#content1
{
    display:none;
}

#content2
{
    display:none;
}

#toggle1:checked ~ #content1
{
  display: block;
}

#toggle2:checked ~ #content2
{
  display: block;
}

Toggle1
Toggle2





Content1
Content2

Let's start from html. There is one important thing. input and span share the same parent in the document tree. Why it's important? Because of general sibling combinator in css.

Ok, now css.

Firstly I'm creating "starting state". #content1 and #content2 are invisible, just as you want. (I could write in css #content1, #content2 { display:none; }, that doesn't matter.)

Secondly I'm making that magic what you're trying to do. I'm using just id and it should be enough. You were using + in css, I've used ~. In my opinion – it's better when you're using element id. Even when + enough.

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

Quote from developer.mozilla.org

More at w3.org – general sibling combinators