Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Accordion
#1
Ein Accordion, wo sich jedes Feld einzeln öffnen lässt, aber alle auf einmal schließt.


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


<style>
body {
  color: #2c3e50;
  background: #ecf0f1;
}
h1 {
  text-align: center;
}
.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #fff;
  overflow: hidden;
}
input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
label {
  position: relative;
  display: block;
  height:60px;
  padding: 0.5em 0 0 1em;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
  background: #2980b9;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
  background: #3498db;
}
.tab-content p {
  margin: 1em;
}

.open{
  height: 10em;
  color:red;
  overflow: hidden;
  background: #1abc9c;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
  background: #3498db;
}
/* Icon */
label::after {
  position: absolute;
  right: 0;
  top: 10px;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  transition: all .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 {
  transform: rotateX(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 amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</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 amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</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 amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</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