Bootstrap Tipps

Collapse / Accordion

> siehe dieses Thema als Videotutorial

Das Thema wird auf der Bootstrap 3 Seite in 2 Bereichen aufgeführt. Erstens das Aussehen, die Styles unter Komponenten Panele und zweitens das Javascript unter Collapse.

Es folgt ein einfaches Javascript Beispiel. 

 <a data-toggle="collapse" data-target="#collapse1" >Klick mich</a>

<div id="collapse1" class="collapse"> 

Das wird ein und ausgeblendet

</div>

Mit data-toggle="collapse" blendet man einen Bereich ein und aus, data-target verweist auf den Bereich der ein und ausgeblendet wird. Stattdessen kann man auch mit href darauf verweisen. Man kann bestimmen, ob der Bereich beim Aufruf der Seite eingeblendet oder ausgeblendet erscheint, Mit der Klasse collapse ist es ausgeblendet mit collapse in ist es eingeblendet

Es war einmal ein Mann
Es war ein mal ein Mann der kaufte sich nen Kamm der Kamm war ihm zu klein, da kauft er sich ein Schwein. Das Schwein war ihm zu fett, da legt er sich ins Bett. Das Bett war ihm zu weich, da legt er sich innen Teich. Der Teich war ihm zu nass, da legt er sich ins Gras. Das Gras war ihm zu grün, da fuhr er nach Berlin. Berlin war ihm zu groß. Da fuhr er nach Franzos. Franzos war ihm zu....
The dog named Finn

Finn

I had a dog and his name was Finn
I told the dog about everything
There in the fields the dog and I
Then one day that old Finn died.

That old Finn was a friend of mine
Never knew a dog that was half as fine
I may find one, you never do know
'Cause I still got a long way to go.

Finn went a-howlin' after deer
but he was scared of jumpin' on the truck in high gear
Finn went a-sniffin' and he would go
Was the best old hound dog I ever did know.

frei nach: Neil Young , Old King

finn

 

Es folgt der Quellcode:

<div class="panel-group" id="accordion">
  
  <div class="panel panel-default">
  
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-target="#collapse1" data-parent="#accordion" >
          Briefmark
        </a>
      </h4>
    </div>
    
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">
          Ein männlicher Briefmark erlebte
      </div>
    </div><!--ende panel-collapse klappebarer Bereich-->
    
  </div><!--ende des ersten collapse-->
  
  
  <div class="panel panel-default">
  
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
         Ramses der Ägypterkönig.
        </a>
      </h4>
    </div>
    
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
        Ramses der Ägypterkönig hatte einmal Geld zuwenig. 
      </div>
    </div>
    
  </div>
  
  
</div>

Wenn man mehr als einen Bereich ein und ausblenden wil, braucht man noch einen Verweis auf ein umschließendes Elternelement, damit sich die einzelnen Elemente nicht überlagern und immer nur eins eingeblendet erscheint. Der Verweis auf geschieht mit data-parent="#elternElement"