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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!