Teach-Yourself-Bootstrap-Code-Samples/tyb-code19.4.html at master · htmljenn/Teach-Yourself-Bootstrap-Code-Samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<section class="panel-group" role="tablist"
         aria-multiselectable="true" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="moreDandy">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion"
           href="#moreDandelions" aria-expanded="true"
           aria-controls="moreDandelions">Learn More About
           Dandelions</a>
      </h4>
    </div>
    <div id="moreDandelions" class="panel-collapse collapse in"
         role="tabpanel" aria-labelledby="moreDandy">
      <div class="panel-body">
        <p>The species of Taraxacum are tap-rooted biennial or
        perennial herbaceous plants, native to temperate areas of the
        globe.</p>
        <p>...</p>
        <p>Text courtesy
        <a href="http://en.wikipedia.org/wiki/Taraxacum">Wikipedia</a>.
        </p>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="voteDandy">
      <h4>
        <a data-toggle="collapse" data-parent="#accordion"
           href="#voteDandelions" aria-expanded="true"
           aria-controls="voteDandelions">Vote for Dandelions</a>
      </h4>
    </div>
    <div id="voteDandelions" class="panel-collapse collapse"
         role="tabpanel" aria-labeledby="#voteDandy">
      <div class="panel-body">
        <p>...</p>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="picsDandy">
      <h4><a data-toggle="collapse" data-parent="#accordion"
             href="#picsDandelions" aria-expanded="true"
             aria-controls="picsDandelions">See Pictures of
             Dandelions</a></h4>
    </div>
    <div id="picsDandelions" class="panel-collapse collapse"
         role="tabpanel" aria-labeledby="#picsDandy">
      <div class="panel-body">
        <p><img src="images/seeded.jpg" alt="seeded"/>
        <p><img src="images/dandy.jpg" alt="full flower"/>
      </div>
    </div>
  </div>
</section>