扩展div链接不起作用

Question

我做了一些研究，找到了一种使用链接来扩展/折叠某些内容的方法。我看不到代码有任何问题，但链接什么也没做。

HTML code;

echo "<div>";
echo "<a href=\"#\" class=\"show\">[Results]</a>";
echo "<a href=\"#\" class=\"hide\">[Results]</a>";
echo "<table class=\"results\">";

然后用php填充表格，然后关闭表格和div。

CSS

.results, .show {display:none}
.hide:focus + .show{display:inline}
.hide:focus {display:none}
.hide:focus ~ .results {display:block ;
 width: 20em; 
margin-left: auto ; 
margin-right:auto}