Hallo,
ich habe folgendes Accordion erstellt. Es klappt alles super. Aber ich möchte gerne, dass der erste Reiter geöffnet ist, wenn ich auf die Webseite gehe. Kann mir jmd weiterhelfen, wie und mit welchem Befehl ich das hinbekomme? Vielen lieben Dank.
<style type="text/css">
body{
font-family:MyriadPro-Light;
font-size:16px;
}
.nl-accordion{
margin:0 auto;
}
.nl-accordion label.nl-label{
display:block;
font-size:100%;
line-height:100%;
background-color:#FFFFFF;
color:#000000;
cursor:pointer;
}
.nl-accordion > ul{
list-style:none;
margin:0;
padding:0;
}
.nl-accordion > ul li {
overflow:hidden;
margin:0 0 0px;
}
.nl-accordion > ul li label.nl-label {
padding:10px;
}
.nl-accordion > ul li label.nl-label:hover {
border:0px solid #FFFFFF;
}
.nl-accordion [type="radio"].nl-radio, .nl-accordion [type="checkbox"].nl-checkbox {
display:none;
}
.nl-accordion > ul li label.nl-label:hover, .nl-accordion [type="radio"].nl-radio:checked ~ label.nl-label, .nl-accordion [type="checkbox"].nl-checkbox:checked ~ label.nl-label {
background:#82004F;
color:#FFF;
-webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.5);
-moz-text-shadow:1px 1px 1px rgba(0,0,0,0.5);
text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}
.nl-accordion [type="radio"].nl-radio:checked ~ label.nl-label, .nl-accordion [type="checkbox"].nl-checkbox:checked ~ label.nl-label {
border-bottom:0;
}
.nl-accordion > ul li .nl-content {
height:0px;
border-top:0;
padding:0 10px;
border:3px solid transparent;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.nl-accordion [type="checkbox"].nl-checkbox:checked ~ label.nl-label ~ .nl-content, .nl-accordion [type="radio"].nl-radio:checked ~ label.nl-label ~ .nl-content{
height:100px;
overflow:auto;
}
</style>
<div id="myAccordion" class="nl-accordion">
<ul>
<li>
<input type="radio" id="nl-radio-1" name="nl-radio" class="nl-radio" />
<label class="nl-label" for="nl-radio-1">xxx</label>
<div class="nl-content">
<p>Durchmesser: Ø 1.9 mm, 2.7 mm, 4 mm<br>
Längen: 60 mm, 110 mm, 175 mm, 187.5 mm<br>Blickrichtungen: 0°, 25°, 30°, 45°, 70°</p>
</div>
</li>
<li>
<input type="radio" id="nl-radio-2" name="nl-radio" class="nl-radio" />
<label class="nl-label" for="nl-radio-2">xxx</label>
<div class="nl-content">
<p>Durchmesser: Ø 2.7 mm, 2.9 mm, 4 mm<br>Längen: 302 mm<br>Blickrichtungen: 0°, 12°, 30°, 70°</p>
</div>
</li>
<li>
<input type="radio" id="nl-radio-3" name="nl-radio" class="nl-radio" />
<label class="nl-label" for="nl-radio-3">xxx</label>
<div class="nl-content">
<p>Durchmesser: Ø 2.7 mm, 4 mm<br>Längen: 50 mm<br>
Blickrichtungen: 0°, 30°
</p>
</div>
</li>
<li>
<input type="radio" id="nl-radio-4" name="nl-radio" class="nl-radio" />
<label class="nl-label" for="nl-radio-4">xxx</label>
<div class="nl-content">
<p>Durchmesser: Ø 10 mm<br> Längen: 190 mm<br>Blickrichtungen: 70°, 90°</p>
</div>
</li>
<li>
<input type="radio" id="nl-radio-5" name="nl-radio" class="nl-radio" />
<label class="nl-label" for="nl-radio-5">xxx</label>
<div class="nl-content">
<p>Durchmesser: Ø 2.7 mm, 4 mm<br>Längen: 110 mm, 175 mm, 187.5 mm<br>
Blickrichtungen: 0°, 30°, 45°, 70°</p>
</div>
</li>
<li>
<input type="radio" id="nl-radio-6" name="nl-radio" class="nl-radio" />
<label class="nl-label" for="nl-radio-6">xxx</label>
<div class="nl-content">
<p>Durchmesser: Ø 2.7 mm, 2.9 mm, 4 mm<br>Längen: 302 mm<br>Blickrichtungen: 0°, 12°, 30°, 70°</p>
</div>
</li>
<li>
<input type="radio" id="nl-radio-7" name="nl-radio" class="nl-radio" />
<label class="nl-label" for="nl-radio-7">xxx</label>
<div class="nl-content">
<p>Durchmesser: Ø 5.5 mm<br> Längen: 489 mm<br>Blickrichtungen: 0°, 30°</p>
</div>
</li>
<li>
<input type="radio" id="nl-radio-8" name="nl-radio" class="nl-radio" />
<label class="nl-label" for="nl-radio-8">xxx</label>
<div class="nl-content">
<p>Durchmesser: Ø 5 mm, 10 mm<br>Längen: 300 mm, 339 mm, 341 mm, 343.5 mm<br>Blickrichtungen: 0°, 30°, 45°</p>
</div>
<li>
</ul>
</div>
</style>
