<body>
  <h1>Arthaey's mockups for multi-lingual content</h1>
  
  <!-- so many nested divs... ;) -->
  <div id="wrap">
    <div id="page-body">

    <div id="multi-controls">
      <h2>Controls for multi-lingual content</h2>
      
      Click on each multi-language heading to toggle just one post.<br><br>
      
      <button id="default-view">Default view</button> how users would see the forum by default, ie only in English<br>
      <button id="spanish-view">Spanish view</button> how Spanish-L2 users would see the forum by default, ie Spanish visible and English collapsed by default<br>
      <hr>
      
      Other possible options:<br>
      <button id="only-english">Pretend there's only English</button><br>
      <button id="only-spanish">Pretend there's only Spanish</button><br>
      <button id="no-machine">Completely hide machine translations</button><br>
      <button id="hide-machine">Hide machine translations by default</button><br>
      <hr>
      
      If things get weird, reset them with this button. This isn't a bug-free demo; it just covers the most common cases. :)<br>
      <button id="show-all">Show all</button><br>
    </div>
      
      <div class="post bg2"><div class="inner"><div class="postbody">
        <h3 class="first"><a href="#">Multi-lingual mockup</a></h3>
        <p class="author"><a href="#"><span class="imageset icon_post_target" title="Post">Post</span></a><span class="responsive-hide">by <strong><a href="#" class="username">arthaey</a></strong> » </span>Fri
          Jul 24, 2015 11:02 pm </p>
        
        <div class="content">
          <div class="multi multi-original multi-es">
            <div class="multi-info">&nbsp;</div>
            <div class="multi-content">Suponga que eso fuera mi mensaje en español.</div>
          </div>
          
          <div class="multi multi-human multi-en">
            <div class="multi-info">&nbsp;</div>
            <div class="multi-content">Suppose this were my post in Spanish.</div>
          </div>
        </div>
      </div></div></div>
      
      <hr class="divider">

      <div class="post bg1"><div class="inner"><div class="postbody">
        <h3 class="first"><a href="#">Multi-lingual mockup</a></h3>
        <p class="author"><a href="#"><span class="imageset icon_post_target" title="Post">Post</span></a><span class="responsive-hide">by <strong><a href="#" class="username">arthaey</a></strong> » </span>Fri
          Jul 24, 2015 11:01 pm </p>
        
        <div class="content">
          <div class="multi multi-original multi-es">
            <div class="multi-info">&nbsp;</div>
            <div class="multi-content">También podría escribir sólo en mi L2, y usar una traducción automática para todavía "escribir" en inglés.</div>
          </div>
          <div class="multi multi-machine multi-en">
            <div class="multi-info">&nbsp;</div>
            <div class="multi-content">You could also just write on my L2, and use an automatic translation to still "write" in English.</div>
          </div>
        </div>
      </div></div></div>
      
      <hr class="divider">

      <div class="post bg2"><div class="inner"><div class="postbody">
        <h3 class="first"><a href="#">Multi-lingual mockup</a></h3>
        <p class="author"><a href="#"><span class="imageset icon_post_target" title="Post">Post</span></a><span class="responsive-hide">by <strong><a href="#" class="username">arthaey</a></strong> » </span>Fri
          Jul 24, 2015 11:02 pm </p>
        
        <div class="content">
          <div class="multi multi-original multi-en">
            <div class="multi-info">&nbsp;</div>
            <div class="multi-content">Maybe we could even do machine translation of originally-English posts into the user's L2(s)?</div>
          </div>
          <div class="multi multi-machine multi-es">
            <div class="multi-info">&nbsp;</div>
            <div class="multi-content">¿Quizás incluso podríamos hacer la traducción automática del inglés originalmente puestos en L2(s) del usuario?</div>
          </div>
        </div>
      </div></div></div>
      
      <p>Machine translations provided by Bing.</p>
    </div>
</body>
.multi-info {
  border-bottom: 1px solid;
  color: #999;
  cursor: pointer;
  display: block;
  font-size: smaller;
  font-weight: bold;
}

.multi-en .multi-info:before {
  content: "[en]";
}

.multi-es .multi-info:before {
  content: "[es]";
}

.multi-human .multi-info:after {
  content: "human translation";
}

.multi-machine .multi-info:after {
  content: "machine translation";
}

.multi-original .multi-info:after {
  content: "original";
}

.multi {
  margin-bottom: 1.3em;
}

/* Styles for instructions and commentary. */

#multi-controls {
  background-color: #ccc;
  border: 1px dashed;
  padding: 0em 2em;
  margin-bottom: 2em;
}

#multi-controls hr {
  border-color: #999;
}

h1 {
 color: #555;
  margin: 1em; 
}
$("#default-view").click(function() {
  $(".multi-en .multi-content").slideDown();
  $(".multi-es .multi-content").slideUp();
});

$("#spanish-view").click(function() {
  $(".multi-en .multi-content").slideUp();
  $(".multi-es .multi-content").slideDown();
});

$("#only-english").click(function() {
  $(".multi-en .multi-info").slideUp();
  $(".multi-en").slideDown();
  $(".multi-es").slideUp();
});

$("#only-spanish").click(function() {
  $(".multi-en").slideUp();
  $(".multi-es").slideDown();
  $(".multi-es .multi-info").slideUp();
});

$("#no-machine").click(function() {
  $(".multi-machine").slideUp();
});

$("#hide-machine").click(function() {
  $(".multi-machine .multi-content").slideUp();
});

$("#show-all").click(function() {
  $(".multi").slideDown();
  $(".multi *").slideDown();
});

$(".multi-info").click(function() {
  $(this).siblings(".multi-content").slideToggle();
}); 

External CSS

  1. https://how-to-learn-any-language.org/styles/prosilver/theme/content.css
  2. https://how-to-learn-any-language.org/styles/prosilver/theme/colours.css
  3. https://how-to-learn-any-language.org/styles/prosilver/theme/buttons.css
  4. https://how-to-learn-any-language.org/styles/prosilver/theme/common.css
  5. https://how-to-learn-any-language.org/styles/prosilver/theme/imageset.css
  6. https://lipis.github.io/flag-icon-css/css/flag-icon.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js