This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

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


Gehe zu:


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