FAQ im Shop

Deutsches Forum
1

Hall zusammen,

ich versuche gerade verzweifelt eine Seite mit den FAQ in den Shop einzubauen. Dabei möchte ich ein Akordeon das folgendermaßen aufgebaut ist:

Block 1
Frage 1
Frage 2

Block 2
Frage 1
Frage 2
Frage 3

usw.

Beim Anklicken von A sollen sich die anderen Kategorien schließen, beim Anlicken von Frage 1 oder 2 die Antwort hierzu öffnen. Das öffnen und schließen der ersten Eben klappt, nur mit der zweiten Ebene haut das irgendwie nicht hin.

Folgendes habe ich bei meiner CMS Seite bisher:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>FAQ</title>

    <style type="text/css">
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 100.01%;
        color: #000;
        background-color: transparent;
      }
      #wrapper1 {
        position: relative;
        width: 58em;
        margin: 0 auto;
        text-align: left;
      }

  .section {
        margin: 1em 0;
        
        padding: 1em;
        background-color: transparent;
      }
      .section > :first-child { margin: 0; }
      .section > :last-child  { margin-bottom: 0; }

      .section:not(:target) *:not(:first-child) { display: none;}
      
  .section2 {
        margin: 1em 0;
        
        padding: 1em;
        background-color: transparent;
      }
      .section2 > :first-child { margin: 0; }
      .section2 > :last-child  { margin-bottom: 0; }

    .section2:not(:target) *:not(section2) { display: none;}
    </style>

    <!--[if lt IE 9]>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
      <script type="text/javascript">
        if(typeof(jQuery)!="undefined") {
          $(document).ready(function() {
            accFkt();
          });

          function accFkt() {
            // first-child- und last-child-Nachhilfe für IE:
            $('.section > :first-child').addClass('first');
            $('.section > :last-child').addClass('last');
            // alle Section-DIV-Blöcke schließen:
            $('.section').addClass('hidden');

            // Klick-Event:
            $('a[href^="#"]').click(function() {
              // alle Section-DIV-Blöcke schließen:
              $('.section').addClass('hidden');
              // angeklickten DIV-Block öffnen:
              $(this).parents('.section').removeClass('hidden');
            });
          }
        }
      </script>

      <style type="text/css">
        /* first-child- und last-child-Nachhilfe für IE: */
        .first, .first a {
          display: block !important;
          margin: 0;
        }
        .last { margin-bottom: 0; }
        /* target-Nachhilfe für IE: */
        .hidden * { display: none; }
      </style>
    <![endif]-->

  </head>
  <!-- OXID eShop Community Edition, Version 4, Shopping Cart System (c) OXID eSales AG 2003 - 2013 - http://www.oxid-esales.com -->
  <!-- OXID eShop Community Edition, Version 4, Shopping Cart System (c) OXID eSales AG 2003 - 2013 - http://www.oxid-esales.com -->

  <body>
    <div id="wrapper1">
     
      <h1><a href="#"></a></h1>

      <div id="block1" class="section">
        <h2><a href="#block1">Block 1</a></h2>
<div id="Test" class="section2">
 <h2><a href="#Test">Subblock1</a></h2>       
<p>Frage 1</p></div>
<div id="Test2" class="section2">
<h2><a href="#Test2">Subblock2</a></h2> 
<p>Frage 2</p>
              </div></div>


      <div id="block2" class="section">
        <h2><a href="#block2">Block 2</a></h2>
   <div id="Test3" class="section">

<h2><a href="#Test">Subblock1</a></h2>       
<p>Frage 1</p></div>
<div id="Test4" class="section">
<h2><a href="#Test2">Subblock2</a></h2> 
<p>Frage 2</p>
              </div></div>

    </div>
  </body>
</html>

Hat jemand von euch sowas schonmal integriert oder eine Idee?