JSFiddle - React, Tailwind, and code Playground

by pauldwaite

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
 
    </head>

    <body>

    <ul>
    <li><div id="sample1" class="sample">Sample <a href="#" OnClick="showone('verbiage1');">[&nbsp;]</a>
    <div id="verbiage1" class="item">
    <div id="source" class="ltcol">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div id="target" class="rtcol">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    </div></div></li>

    <li><div id="sample2" class="sample">Sample <a href="#" OnClick="showone('verbiage2');">[&nbsp;]</a>
    <div id="verbiage2" class="item">
    <div id="source" class="ltcol">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div id="target" class="rtcol">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    </div></div></li>

    </body>
    </html>

CSS

div.sample {
    position:relative;
    left:0px;
    }  
    div.item {
    position:relative;
    display:none;
    width:600px;
    left:10px;
    text-align:justify;
    }
  
    div.ltcol{
    float:left;
    width:45%;
    }
  
    div.rtcol{
    float:right;
    width:45%;
    }

JavaScript

//Quick and dirty javascript to get it up and running.
    alldivs=['verbiage1','verbiage2'];

    function showone(name) {
     divname="#".concat(name);
    for (var i in alldivs){
    if ("#".concat(alldivs[i])==divname){
       $(("#".concat(alldivs[i]))).toggle(200);
       }
      else{
          $(("#".concat(alldivs[i]))).hide(200);
      }
     }
      return true;
    };