I have 3 divs with the ids showMe1, showMe2, and showMe3. They are supposed to be hidden until I click on them but they are rendered on the page. So “lorem ipsum dolor amet” is displayed on the page even though I set the style to display: none. How do I hide them before they’re clicked?
This looks like a fundamental html thing. From looking at your code you closed the quote mark directly after showMe - so you have 3 components named showMe.
I would imagine you generated this string: -
<!-- HTML -->
<div id= 'showMe'1style='display: none'>lorem ipsum dolor amet</div>
(Put the $i inside the quote, put a space before style.)
Using a Chrome based browser, press F12 for developer options, and locate the element. You can right click to copy/paste the full element contents for debugging.
As you have decided to generate your own HTML I strongly recommend using Ctrl + U to view the source and copy/paste that into a blank HTML file in an editor like NetBeans which will show you all your syntax errors as well as suggestions.
Thanks Jawfin. I re-wrote it as you suggested and now echo "<div id='showMe" . $i . "' style='display: none'>";
renders in the view source: <div id='showMe1' style='display: none'>