I am trying to create a basic blog page, which shows me the blog posts and any comments. I have the MySQL and PHP interface working correctly and I can display the results fine. Using CSS, I have formatted the output in the manner I require. My problem is with showing and hiding the comments. I can get the first comments box to show/hide, but the rest won't. I know the problem is to do with the ID of the DIV that is being manipulated. Due to the PHP loop producing the relevant code, the DIV can be printed in one of 2 ways, either with the ID being the same for each one, or by increasing a number at the end of the ID by one through each iteration. What is the best way to do this in order that the CSS will hide the correct DIV. My only real idea is to have a CSS with lots of numerical ID descriptions, ie: commentwrap1 {} commentwrap2 {} ... commentwrap999 {} etc. However, this seems cumbersome and not ideal at all. How should I go about this problem? Thanks.
Okay, I accidentally stumbled across a solution. Using PHP, I print each <div id="commentwrap[ID]" style="display:none;"> In the CSS, I have: div#commentwrap { display: none; } This works in Firefox, and I am yet to test it in IE. What I am curious about is why this works, given that each ID is unique?
You can't do this with CSS alone because only Internet Explorer and Firefox use the :focus psuedo-class properly. You'll have to use JavaScript for this in order for it to work properly cross-browser.