Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Accordion
#1
Ein Accordion wo sich jedes Feld einzelnd Öffnen läßt,aber alle auf einmal schließt.
DEMO  **Link entfernt, weil Seite nicht mehr erreichbar **

CODE:
PHP-Code:
<!DOCTYPE html>
<
html>
<
head>
 
   <title>Accordeon mit Js</title>


<
style>
body {
 
 color#2c3e50;
 
 background#ecf0f1;
}
h1 {
 
 text-aligncenter;
}
.
tab {
 
 positionrelative;
 
 margin-bottom1px;
 
 width100%;
 
 color#fff;
 
 overflowhidden;
}
input {
 
 positionabsolute;
 
 opacity0;
 
 z-index: -1;
}
label {
 
 positionrelative;
 
 displayblock;
 
 height:60px;
 
 padding0.5em 0 0 1em;
 
 font-weightbold;
 
 line-height3;
 
 cursorpointer;
 
 background#2980b9;
}
.
tab-content {
 
 max-height0;
 
 overflowhidden;
 
 -webkit-transitionmax-height .35s;
 
 -o-transitionmax-height .35s;
 
 transitionmax-height .35s;
 
 background#3498db;
}
.
tab-content p {
 
 margin1em;
}

.
open{
 
 height10em;
 
 color:red;
 
 overflowhidden;
 
 background#1abc9c;
 
 -webkit-transitionmax-height .35s;
 
 -o-transitionmax-height .35s;
 
 transitionmax-height .35s;
 
 background#3498db;
}
/* Icon */
label::after {
 
 positionabsolute;
 
 right0;
 
 top10px;
 
 displayblock;
 
 width3em;
 
 height3em;
 
 line-height3;
 
 text-aligncenter;
 
 transitionall .35s;
}
#link1{
 
 content:'dd';
 
 float:right;
 
 margin-top:-15px;
 
 padding:0 10px 0px 0;
 
 color:green;
}
input[type=radio] + label::after {
 
 content"\25BC";
}

input[type=radio]:checked label::after {
 
 transformrotateX(180deg);
}


</
style>
</
head>
<
body>
<
div class="wrapper">
 
 <h1>Pure CSS Accordion</h1>

 
 
   <div class="tab blue">
 
     <input id="tab-four" type="radio" name="tabs2">
 
     <label data-wert="a1" for="tab-four">Label One<a href="google.de" id="link1">Link</a></label>
 
     <div id="a1"  class="tab-content">
 
       <p>Lorem ipsum dolor sit ametconsectetur adipisicing elitTeneturarchitectoexplicabo perferendis nostrummaxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eumSaepeitaque.</p>
 
     </div>
 
   </div>
 
   <div class="tab blue">
 
     <input id="tab-five" type="radio" name="tabs2">
 
     <label data-wert="a2" for="tab-five">Label Two</label>
 
     <div  id="a2" class="tab-content">
 
       <p>Lorem ipsum dolor sit ametconsectetur adipisicing elitTeneturarchitectoexplicabo perferendis nostrummaxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eumSaepeitaque.</p>
 
     </div>
 
   </div>
 
   <div class="tab blue">
 
     <input id="tab-six" type="radio" name="tabs2"
 
     <label data-wert="a3" for="tab-six">Label Three</label>
 
     <div id="a3" class="tab-content">
 
       <p>Lorem ipsum dolor sit ametconsectetur adipisicing elitTeneturarchitectoexplicabo perferendis nostrummaxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eumSaepeitaque.</p>
 
     </div>
 
   </div>
 
 </div>
</
div>
<
script>

$(
'label').click(function(){

 
 g=$(this).data('wert');
 
 gg=$('#'+g+'').hasClass('tab-content');
 
 if(gg==true){
 
 $('#'+g+'').removeClass('tab-content');
 
 $('#'+g+'').addClass('open');
 
 }else{
 
   /*die beiden Zeilen aktivieren um einzelnz zu schliessen
     $('#'+g+'').removeClass('open');
     $('#'+g+'').addClass('tab-content');
    */
 
 //so schliessen immer alle felder
 
      $('#a1,#a2,#a3').removeClass('open');//einzeln schliesen
 
    $('#a1,#a2,#a3').addClass('tab-content');
 
   
  
}
 
 
})

</
script>




</
body>
</
head
Fals fragen sind immer raus damit
Zitieren


[-]
Schnellantwort
Nachricht
Geben Sie hier Ihre Antwort zum Beitrag ein.


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste