fix(css): update 'display' interactive demo

[OnkarRuikar]

• fixes https://github.com/mdn/content/issues/31437

Screenshot

[dipikabh]

This is close. But I think the additional text in the example does not fully clarify the element on which display is being set, especially considering that the OP in the issue expected each child element to have its own display setting.

Brainstorming an idea here. How about we add a description outside the div to explain the example, something like "The orange element represents the div on which different display values are set. It contains three child elements." This can be followed by:

    <div class="example-container">
      some text A
      <div id="example-element">
        <div class="child">Child 1</div>
        <div class="child">Child 2</div>
        <div class="child">Child 3</div>
      </div>
      some text B
    </div>

With display: none, the current text in the proposed PR reads: "Change display property of this div element.". It refers to the div element that gets hidden when display: none. Instead of using a complete sentence, using placeholders like "some text A" and "some text B" could demonstrate the absence of the div more effectively. With display: none, the output would read "some text A some text B"", indicating that the div is not displayed.

Let me know what you think.

[OnkarRuikar]

How about we add a description outside the div to explain the example, something like "The orange element represents the div on which different display values are set. It contains three child elements." This can be followed by:

@dipikabh Yes, we need to be more explicit.

[OnkarRuikar]

@dipikabh you'll have to merge https://github.com/mdn/interactive-examples/pull/2716 as well to make it live.

[dipikabh]

you'll have to merge https://github.com/mdn/interactive-examples/pull/2716 as well to make it live.

Done 👍

[wbamberg]

Thanks! FWIW I agree with @dipikabh that we should try very hard to keep interactive examples self-contained. And that really any kind of exposition in the examples is unfortunate, but sometimes as in this case it is unavoidable (as also for instance here: https://developer.mozilla.org/en-US/docs/Web/CSS/position). But I think what you have here is perfect :).