Hallo, ich füge mit dem Script ne andere Höhe ein, aber der transition Effekt will einfach nicht
Hier der Code,
http://jsfiddle.net/wolfwortmann/Qz76h/
HTML
<section class="main">
<article class="art" >
<div class="imgbox"><img class="ddbtn" src="reck.png"></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>
<?php
if(this){
echo "hallo";
}</pre>
</td>
</table>
</article>
<article class="art" >
<div class="imgbox"><img class="ddbtn" src="reck.png"></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>
<?php
if(this){
echo "hallo";
}</pre>
</td>
</table>
</article>
<article class="art" >
<div class="imgbox"><img class="ddbtn" src="reck.png"></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>
<?php
if(this){
echo "hallo";
}</pre>
</td>
</table>
</article>
</section>
Alles anzeigen
JavaScript
function toggleArt(article,butn){
if (article.style.height != "auto") {
article.style.height = "auto";
article.styletransition= "height 5s";
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")]);}
};
Alles anzeigen
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 .docu>h2{
display: inline-block;
list-style-type: disc;
}
section.main .docu a.button{
background-color: rgba(255,255,255, 0);
}
section.main .docu a.button:hover{
background-color: rgba(255,255,255, .8);
}
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+5){
border-top: 2px solid black;
}
section.main article p{
max-width: 800px;
}
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;
}
Alles anzeigen