Ich habe ein ganz tolles horizontales "Accordeon" gefunden. In dem hat es "Tabs" auf denen ein Text steht. der steht aber vertikal auf dem Tab __I statt L ) Ich brauche aber keinen Text in jedem Tab, sondern nur einen Buchstaben und der muss ganz normal horizontal stehen. Kann man Buchstaben irgendwie in CSS drehen?
Code
<style>
.accordion {
font-size:14px;
border:1px solid #542437;
padding:10px;
background:blue;
}
.accordion ul {
list-style:none;
margin:0;
padding:0;
display:flex;
}
.accordion li {
margin:0;
padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
display:none;
}
.accordion label {
display:block;
font-size:26px;
line-height:16px;
background:black;
border:1px solid #542437;
color:white;
font-weight:700;
cursor:pointer;
}
.accordion ul li label:hover, .accordion [type=checkbox]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
background:#C02942;
color:#FFF;
}
.accordion .content {
padding:0 10px;
overflow:hidden;
border:1px solid #fff;
}
.accordion p {
color:white;
margin:0 0 10px;
}
.accordion h3 {
color:white;
padding:0;
margin:10px 0;
}
.horizontal {
overflow:hidden;
height:300px;
}
.horizontal ul li {
display:flex;
margin:0 1px 0 0;
}
.horizontal ul li label {
letter-spacing:10px;
text-align:center;
height:280px;
padding:10px 0 10px 5px;
width:24px;
float:left;
}
.horizontal ul li .content {
height:300px;
padding:0;
display:inline-block;
visibility:hidden;
width:1px;
border-left:0;
}
.horizontal [type=checkbox]:checked ~ label {
border-right:0;
}
.horizontal ul li label:hover {
border:1px solid #542437;
}
.horizontal [type=checkbox]:checked ~ label ~ .content {
visibility:visible;
width:343px;
padding:0 10px;
border:1px solid #542437;
border-left:0;
}
#ausnahme{
transform:rotate(-90deg);
transition:500ms all;
}
[type=checkbox]:checked ~ label >#ausnahme{
transform:rotate(0deg);
transition:500ms all;
}
</style>
<div class="accordion horizontal">
<ul>
<li>
<input type="checkbox" id="vert-1" name="vert-accordion">
<label for="vert-1"><div id="ausnahme">B</div></label>
<div class="content">
<h3>This is an example accordion item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
<p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
</div>
</li>
<li>
<input type="checkbox" id="vert-2" name="vert-accordion" />
<label for="vert-2">A</label>
<div class="content">
<h3>Totally another one right here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
<p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
</div>
</li>
<li>
<input type="checkbox" id="vert-3" name="vert-accordion" />
<label for="vert-3">S</label>
<div class="content">
<h3>I think I can go on forever</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
<p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
</div>
</li>
<li>
<input type="checkbox" id="vert-4" name="vert-accordion" />
<label for="vert-4">T</label>
<div class="content">
<h3>I was wrong, I'm done</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
<p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
</div>
</li>
<li>
<input type="checkbox" id="vert-5" name="vert-accordion" />
<label for="vert-5">I</label>
<div class="content">
<h3>I was wrong, I'm done</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
<p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
</div>
</li>
</ul>
</div>