Button funktionen
Ich brauche 4 Buttons und wenn man darauf Klickt soll für jeden Button ein Container geöffnet werden.
Ich darf aber kein Javascript benutzen , ist das irgendwie möglich?
Der hier verwendete Code
<style>
*{
margin: 0;
padding: 0;
}
section {
display: none;
position:relative;
height:100px;
width:200px;
padding: 20px 0 0;
border: 1px solid #ddd;
}
input {
display: none;
}
label:hover {
color: #888;
cursor: pointer;
}
input:checked + label {
color:black;
border: 1px solid black;
background:rgba(2,255,0,0.4);
box-shadow:1px 1px 1px black;
}
label{
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
background:#ededed;
border:1px solid #aaa;
cursor:pointer;
position:relative;
top:20px;
margin:20px;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
label:hover {
background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
background:#dfdfdf;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4
{
display:block;
position:absolute;
height:100px;
width:200px;
text-align:center;
font-size:40px;
border:3px solid green;
}
#tab1:checked ~ #content1{
top:100px;
left:10px;
}
#tab2:checked ~ #content2{
top:100px;
left:220px;
}
#tab3:checked ~ #content3{
top:100px;
left:440px;
}
#tab4:checked ~ #content4{
top:100px;
left:660px;
}
</style>
<input id="tab1" type="checkbox" name="tabs">
<label for="tab1">eins</label>
<section class="content" id="content1">
<p>inhalt1</p></section>
<input id="tab2" type="checkbox" name="tabs">
<label for="tab2">zwei</label>
<section class="content" id="content2">
<p>inhalt2</p></section>
<input id="tab3" type="checkbox" name="tabs">
<label for="tab3">drei</label>
<section id="content3">
<p>inhalt3</p></section>
<input id="tab4" type="checkbox" name="tabs">
<label for="tab4">vier</label>
<section id="content4">
<p>inhalt4</p></section>