expanding/collapsing div with checkbox in IE - php

Question

http://jsfiddle.net/EWH8E/
I have some pages that include hidden content that is revealed when a checkbox is 'ticked' and hidden again when 'unticked'. Everything works perfectly in Chrome and FF, but I either get the content always showing or hidden but the checkbox doesn't work in IE.
I am using Ie8, but have tried in 9 also and the same happens. ANy suggestions as to how to get it to work? I included the following in the HTML head section to counter the use of the article element.
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Now here is the PHP code
echo "<div class=\"resultsContainer\">";
echo "
Recent Results
<article class=\"small\">
<table class=\"results\">";
$query2=$database->query("SELECT team_name, team_score, opposition_score,
opposition_name from results_a ORDER BY updated DESC LIMIT 0, 5");
$i=0;
while ($row2=$query2->fetch(PDO::FETCH_NUM)) {
echo ($i %2 == 0)? "<tr class=\"stripe\">" : "<tr class=\"nostripe\">";
printf ("<td>%s<td class=\"small\">%s<td class=\"small\">%s<td>%s</tr>",
$row2[0],$row2[1], $row2[2], $row2[3]);
$i++;
}
echo "</table>";
echo "</article>";
echo "</div>";
And the CSS
.resultsContainer article {
background:white ;
overflow:hidden ;
height: 0px ;
position: relative ;
z-index:10}
.resultsContainer input:checked ~ article.small {
height:100% ;
width: 100% }
.results {text-align: center ;
table-layout:fixed ;
margin-left: 0 ;
margin-right: 0 ;
padding-top:0.7em ;
width: 65% ;
color:#0431B4 }

Answer 1

The :before selector is not supported in IE versions earlier than 9.
Your best bet for browser support is to use javascript instead.
All you have to do is bind an event listener to the checkbox. So when you click it, you can either directly change the width and the height or just use toggleClass().
$( "YOUR CHECKBOX ID OR CLASS" ).change(function() {
$( "ID OR CLASS OF ITEMS YOU WANT TO DISPLAY" ).toggleClass( "ACTIVE CLASS NAME" );
});
Or if you just set those elements to display: none; then you can do
$( "YOUR CHECKBOX ID OR CLASS" ).change(function() {
$( "ID OR CLASS OF ITEMS YOU WANT TO DISPLAY" ).toggle();
});
Although these answers seem similar, they are very different. Be sure to know the difference.