so gehts hinzugefügt

css/10-jahre.css

@@ -257,13 +257,14 @@ ul.graph.medium li.about_80 { border-left-width: 352px; }
   top: 90px;
 }
 
-#so_gehts { 
-  background-repeat: no-repeat;
-  background-position: center bottom;
-  min-height:  560px;
-  }
+#so_gehts { min-height:  600px; border-bottom: 1px solid #e5e5e5; background-color: #f6f6f6; background-image: none;}
+
+#so_gehts .pane { display: none; padding-top: 30px; height: 430px; width: 100%; text-align: center; position: absolute; bottom: 0; left: 0; background-repeat: no-repeat; background-position: center bottom; }
+#so_gehts .pane#first  { background-image: url(../pix/so_gehts_step_1.png); }
+#so_gehts .pane#second { background-image: url(../pix/so_gehts_step_2.png); }
+#so_gehts .pane#third  { background-image: url(../pix/so_gehts_step_3.png); }
+#so_gehts .pane.active { display: block;}
 
-#so_gehts.first { background-image: url(../pix/colored_hands.jpg); }
 #so_gehts ul { height: 80px; background: transparent url(../pix/so_gehts_nav.png) no-repeat;}
 #so_gehts.first ul  { background-position: left top; }
 #so_gehts.second ul { background-position: left -80px; }

includes/so_gehts.htm

@@ -1,9 +1,23 @@
     <!-- so_gehts -->
-    <div id="so_gehts" class="schmal first">
+    <div id="so_gehts" class="schmal">
       <h2 class="yellow_snow_large_center">So gehts:</h2>
       <ul>
-        <li class="first">Deine Stimme zählt</li>
-        <li class="second">Wir spenden 5.000 &euro;</li>
-        <li class="third">Ein Hilfsprojekt<br/>wird unterstützt</li>
+        <li class="first">Wir spenden 50.000 &euro;</li>
+        <li class="second">28 Tage Spannung</li>
+        <li class="third">Es gibt nur Gewinner</li>
       </ul>
+      <div class="pane active" id="first">
+        <h3>Wir spenden 50.000&euro;</h3>
+        <p>10 Monate lang spenden wir jeweils 5.000 Euro an 5 ausgewählte Organisationen.<br/>
+Wählen Sie jeden Monat Ihren Favoriten und erzählen Sie all Ihren Freunden davon.</p>
+      </div>
+      <div class="pane" id="second">
+        <h3>28 Tage Spannung</h3>
+        <p>Jede Abstimmung beginnt am 1. eines Monats und läuft 4 Wochen. Sie können jeden Monat einmal abstimmen – <br>10 Monate lang. Verfolgen Sie jeden Tag den aktuellen Stand der Abstimmung.</p>
+      </div>
+      <div class="pane" id="third">
+        <h3>Es gibt nur Gewinner</h3>
+        <p>Jede teilnehmende Organisation bekommt mindestens 500 Euro.<br>
+Die Organisation mit den meisten Stimmen erhält sogar 3000 Euro!</p>
+      </div>
     </div>

js/script.js

@@ -4,8 +4,11 @@
 
 $(document).ready(function() {
   $('#so_gehts ul li').click(function(){
+    var myclass = $(this).attr('class');
+    $('#so_gehts .pane.active').removeClass('active');
+    $('#so_gehts').find('#' + myclass ).addClass('active');
     $('#so_gehts').removeClass('first second third')
-    $('#so_gehts').addClass($(this).attr('class'));
+    $('#so_gehts').addClass(myclass);
   })
 });