JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<div class="bloc_com_contre" id="1">
  <aside>
    <div alt="\r\n\t\t\t\t\t\t\t\t$pseudo &lt;img style='float:right' src='img/actualise.jpg' /&gt; &lt;br&gt;\r\n\t\t\t\t\t\t\t\t$description &lt;br&gt;\r\n\t\t\t\t\t\t\t\t$categories\t&lt;br&gt;\r\n\t\t\t\t\t\t\t\tMsg : $msg_count\r\n\t\t\t\t\t\t\t\t" class="bordure_avatar avatar_du_commentaire">
      <img alt="shideneyu" class="bigavatar" src="https://secure.gravatar.com/avatar/4ae4aa6bebac9381d575948b9b9cc59a?s=100&amp;d=http%3A%2F%2Fwww.la-matrice.org%2Fwp-content%2Fuploads%2F2013%2F09%2FAnonymous.png">
    </div>
    <div class="plussoie">
      <span>
        +X
      </span>
      <img alt="Flechecontre" src="/assets/flechecontre.png">
    </div>
  </aside>
  <div class="text_place_large">
      <a href="#" class="showmydiv">show this div</a>
    <div class="before_com">
      <div class="nom_util">
        <a href="1" title="Voir le profil de shideneyu">
          shideneyu
        </a>
      </div>
      <div class="mod_button">
        <a id="report1" onclick="" class="t_hideOnClickOutside" style="background-color: red; color: white;">
          !
        </a>
        <a onclick="" title="Supprimer">
          x
        </a>
        <a onclick="" title="Editer">
          Editer
        </a>
        <a onclick="" title="El button">
          Citer
        </a>
      </div>
      <div class="permalink">
        Lien Permanent 
      </div>
    </div>
    <div class="text_com">
      <p>
        Cats are sweet with salt
      </p>
    </div>
    <div class="after_com">
      <div class="partage">
        <img alt="Twitter" src="/assets/twitter.png">
        <img alt="Facebook" src="/assets/facebook.png">
        <img alt="G+" src="/assets/g+.png">
      </div>
      <a href="#" style="font-size: 10px">
        <abbr>
          a day ago
        </abbr>
      </a>
    </div>
  </div>
</div>

CSS

.text_place_large .after_com{
  display : inline-block;
  visibility: hidden;
  position: absolute;
  bottom: 0; 
  width : 100%;
}

.text_place_large .before_com .mod_button a{
  padding:5px;
  border-radius:0.3em;
  background-color: rgba(255,255,255,0.5);
  border:1px solid black;
  font-weight: bold;
  visibility: hidden;
}

.before_com .permalink{
   font-size: 10px;
   color: #777;
   line-height: 16px;
   margin-top: -5px;
   visibility: hidden;
}

JavaScript

$(document).ready(function() {
    $('.showmydiv').click(function(e) {
        e.preventDefault();
        $(this).parents('.text_place_large').children().css({visibility: 'visible'});
    });
});