No-JavaScript CSS toggle not working on Android 4.0.3

I would like to make a toggle button which will open more details. This works fine on my laptop, but not on my mobile phone. Why is that so? I quess that this should work on Android 4.0.3, but it does not do so.

My XHTML code:

<div class="listaus">
<input type="checkbox" value="checked" id="someID-1" class="listaus-valintaruutu" />

<div class="listaus-kilpailunimi"><span class="listaus-seura-sarja">&nbsp;Org / 1 div&nbsp;</span><br /><a href="test.php">1 div, RG2</a><span class="listaus-avauspainike"><label for="someID-1" class="listaus-avauspainike">+</label></span></div>

<div id="tooltipID" class="listaus-sisalto">
Hello World!
</div>
</div>

My CSS code:

.listaus-kilpailunimi {
clear:both;
margin:0px;
padding:2px;
padding-left:32px;
color:#000000;
border-bottom:1px dotted #444444;
}

span.listaus-seura-sarja {
background-color:#C4DCF8;
}

span.listaus-avauspainike {
float:right;
margin-top:-5px;
padding-right:0px;
}

label.listaus-avauspainike {
cursor: pointer;
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #FFFFFF;
background-color: #13539B;
font-family: Tahoma, Arial, "Times New Roman", sans-serif;
font-weight: normal;
font-size: 11px;
color: #FFFFFF;
text-align:center;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

label.listaus-avauspainike:hover {
border: 1px solid #D60C3C;
background-color: #D60C3C;
}

.listaus-valintaruutu {
display: none;
}

.listaus-sisalto {
}

.listaus-valintaruutu:checked ~ .listaus-sisalto {
display: block;
}

.listaus-valintaruutu:not(checked) ~ .listaus-sisalto {
display: none;
}

So, why does not that code toggle when using Android 4.0.3?

 

Why are you using Android 4.0.3? It's at least 6 generations, if not more, old. Second, which browser? The built-in Android browser? It has crappy support for a lot of stuff, and might not like the CSS. If you're using Chrome, it should work just fine. Could you perhaps provide a link to the site, so it would be possible to test?

 

:not is unpredictable cross browser, I advise NOT using it. Likewise if you're going to play with :checked, you really need to state your FULL specificity.

Where you have this:

.listaus-sisalto {
}

.listaus-valintaruutu:checked ~ .listaus-sisalto {
display: block;
}

.listaus-valintaruutu:not(checked) ~ .listaus-sisalto {
display: none;
}

Code (markup):

I'd have this:

.listaus-valintaruutu ~ .listaus-sisalto {
	display: none;
}

.listaus-valintaruutu:checked ~ .listaus-sisalto {
	display: block;
}

Code (markup):

Though what browser under 4.0.3 and/or what version? There's more than just the built in one available, and at least three different versions of chrome on that one level build of Android alone...

You also seem to have gone a bit class-happy in there. Really for what you are doing a good chunk of that markup is just code bloat.... and value="checked" is gibberish. If you want it to start out checked in XHTML it's checked="checked", not value="checked". only reason to state value is if that is being passed in a form to the server anyways. When you've got a perfectly good class on a parent element and no siblings of the same to worry about, don't dick around with throwing extra classes on the child elements. (no matter what dumbass halfwit garbage like CSSLint is telling people now) -- you even seem to have a number of "span for nothing" like the one wrapping the label, since you aren't doing anything on that span that couldn't be done on the label....

Much less all those px measurements being a giant middle finger to accessibility...