Hello (especially Milo)

The code for displaying and not-displaing of HTML-elements changed from altering the (inline)-styles to altering class names. There is a small problem (for me). I want to alter other elements and to set the CSS-rules with inheritance.

Let's describe an example. The entries in nested view are foldable with a klick into the title box. In the past a click altered the inline styles of the elements, that should be hidden. In the present the click alters class names in the elements, that should be hidden. With the exception of the difference between inline styles and class names no difference in the behaviour.

The following is the new in the alpha-code introduced behaviour.

visible entry:

<div class="thread-posting read" id="p1">
 <div class="header">
  <img id="avatar-1" class="avatar" src="…" alt="Avatar" width="80" height="80">
  <h1 id="headline-1" class="js-cursor-pointer" title="Eintrag ein-/ausklappen">…</h1>
  <p class="author">…</p>
 </div>
 <div class="wrapper" id="posting-1">
  <div class="body">…</div>
  <div class="posting-footer">
   <div class="reply">…</div>
   <div class="info">…</div>
  </div>
 </div>
</div>

invisible entry (please take notice of the class js-display-none for the avatar and the div.wrapper):

<div class="thread-posting read" id="p1">
 <div class="header">
  <img id="avatar-1" class="avatar js-display-none" src="…" alt="Avatar" width="80" height="80">
  <h1 id="headline-1" class="js-cursor-pointer" title="Eintrag ein-/ausklappen">…</h1>
  <p class="author">…</p>
 </div>
 <div class="wrapper js-display-none" id="posting-1">
  <div class="body">…</div>
  <div class="posting-footer">
   <div class="reply">…</div>
   <div class="info">…</div>
  </div>
 </div>
</div>

I want to change it to the following. What I want, is the assignment of the class to the parent element.

<div class="thread-posting read js-display-none" id="p1">
 <div class="header">
  <img id="avatar-1" class="avatar" src="…" alt="Avatar" width="80" height="80">
  <h1 id="headline-1" class="js-cursor-pointer" title="Eintrag ein-/ausklappen">…</h1>
  <p class="author">…</p>
 </div>
 <div class="wrapper" id="posting-1">
  <div class="body">…</div>
  <div class="posting-footer">
   <div class="reply">…</div>
   <div class="info">…</div>
  </div>
 </div>
</div>

That way it is possible to set for theme A:

div.thread-posting.js-display-none .avatar {
  width: 1em;
  height: 1em;
}
div.thread-posting.js-display-none .body {
  display: none;
}

… and for the theme B:

div.thread-posting.js-display-none .avatar,
div.thread-posting.js-display-none .wrapper {
  display: none;
}

I would like to have the same behaviour for #sidebar and #bottombar. Is the idea supportable?

Tschö, Auge