Display none is being displayed

<?php for ($i = 1; $i <= 3; $i++) {
echo "<div id= 'showMe'" . $i . "style='display: none'>";	
?>
lorem ipsum dolor amet
</div>

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?

In my tags I placed:

<style>
#showMe1 {display: none!important;}
#showMe2 {display: none!important;}
#showMe3 {display: none!important;}
</style>

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.

1 Like

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'>

And did that fix the issue?

You can further simplify that as

echo "<div id='showMe$i' style='display: none'>";

or (required syntax in certain situations, to remove ambiguity, and my preference all the time just to be extra clear)

echo "<div id='showMe{$i}' style='display: none'>";