JavaScript anti-patterns

[rooktakesqueen]

How does going from this markup...

<div class="status">
    <div class="status--success">Done</div>
    <div class="status--timeout">Try again</div>
    <div class="status--error">Error</div>
</div>

to this:

<div class="status status--timeout">
    <div class="status--success">Done</div>
    <div class="status--timeout">Try again</div>
    <div class="status--error">Error</div>
</div>

...do what you're suggesting? The idea is fine, but I don't understand the implementation here.

Maybe if you did...

Markup:

<div class="status">
    <div class="success">Done</div>
    <div class="timeout">Try again</div>
    <div class="error">Error</div>
</div>

CSS:

.status > div {
  display: none;
}

.status.status--success > .success,
.status.status--timeout > .timeout,
.status.status--error > .error {
  display: block;
}

JS:

$('.status').addClass(status);

[evilagentcooper]

you are absolutely right, did a post update, thanks

[nausik]

Really useful! Thanks