JSFiddle - React, Tailwind, and code Playground

by Wolf Wortmann

HTML

<section class="main">
<article class="art" >
			<div class="imgbox"><img class="ddbtn" src="http://wolfts.no-ip.org/CodeBox/reck.png" title="Code zeigen"></div>
			<div class="name"><span>gallerie.php</span><span>PHP JS Code</span></div>
			<table>
				<td class="row">
<pre>
1
2
3
4</pre>
				</td>
				<td class="rowcode"><pre>
&lt;?php
if(this){
  echo "hallo";
}</pre>
				</td>
			</table>
		</article>
		<article class="art" >
			<div class="imgbox"><img class="ddbtn" src="http://wolfts.no-ip.org/CodeBox/reck.png" title="Code zeigen"></div>
			<div class="name"><span>gallerie.php</span><span>PHP JS Code</span></div>
			<table>
				<td class="row">
<pre>
1
2
3
4</pre>
				</td>
				<td class="rowcode"><pre>
&lt;?php
if(this){
  echo "hallo";
}</pre>
				</td>
			</table>
		</article>
		<article class="art" >
			<div class="imgbox"><img class="ddbtn" src="http://wolfts.no-ip.org/CodeBox/reck.png" title="Code zeigen"></div>
			<div class="name"><span>gallerie.php</span><span>PHP JS Code</span></div>
			<table>
				<td class="row">
<pre>
1
2
3
4</pre>
				</td>
				<td class="rowcode"><pre>
&lt;?php
if(this){
  echo "hallo";
}</pre>
				</td>
			</table>
		</article>
</section>

CSS

section.main>p{
	max-width: 800px;
}
section.main .imgbox{
	display: inline-block;
	width: 30px;
	height: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
section.main .imgbox>img{
	height: 10px;
	
	vertical-align: top;
}
section.main article{
	font-size: 14px;
	color: #FFF;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 40px;
	padding-left: 40px;
	overflow: hidden;
	background-color: rgba(28,28,28, 1);
	height: 52px;
	transition: height 5s;
}
section.main article:nth-child(1n+2){
	border-top: 2px solid black;
}
section.main article.docu{
	font-size: 16px;
	margin-top: 0px;
	padding: 40px;
	padding-top: 10px;
	background-color: rgba(255,255,255, .1);
	height: auto;
	position: relative;
}
section.main article p{
	max-width: 800px;
}
section.main article.docu>p{
	margin-top: 10px;

}
section.main article .name{
	display: inline-block;
}
section.main article .name>span{
	display: block;
}
section.main article table{
	margin-top: 20px;
	margin-bottom: 20px;
	width: 100%;
}
section.main article td.rowcode{
	width: calc(100% - 31px);
	padding-left: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
section.main article td.row{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 3px;
	width: 30px;
	text-align: right;
	border-right: 1px solid #FFF;
}
section.main article pre{
	font-size: 14px;
}

JavaScript

window.onload=function(){
// Code toggle Box
	function toggleArt(article,butn){
	if (article.style.height == "52px") {
		article.style.height = "300px";
		article.style.transition= "height 1s";
		butn.style.transform = "rotate(90deg)";
	}
	else{
		article.style.height = "52px";
		butn.style.transform = "rotate(0deg)";
	}
    }
	
	var article = document.getElementsByClassName("art");
	var butn = document.getElementsByClassName("ddbtn");
	for (var i = 0; i < butn.length; i++){
		butn[i].setAttribute("data-i", i);
		butn[i].onclick = function(){toggleArt(article[this.getAttribute("data-i")],butn[this.getAttribute("data-i")]);}
    }
}