<reference name="root"> <reference name="head"> <block type="core/text" name="google.cdn.jquery"> <action method="setText"> <text> <![CDATA[<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function(){ jQuery('.FAQanswer').hide(); jQuery('h2').click(function(){ jQuery(this).next('.FAQanswer').slideToggle(); jQuery(this).toggleClass('active'); }); }); </script>]]> </text> </action> </block> </reference> </reference>
Dannach sollte die Html Struktur auf der Seite für den FAQ Bereich wie folgt aussehen:
<h2 class="FAQ">Question</h2> <div class="FAQanswer">Answer will go here.</div>
Verschachtelungen sind möglich.
Credits gehen an: http://www.iamkreative.co.uk/design/sliding-faq/ & http://magebase.com/magento-tutorials/5-useful-tricks-for-your-magento-local-xml/
Falls jemand eine einfache Möglichkeit kennt so eine Funktion über prototype / scriptaculous einzubinden, wäre ich für einen Tip sehr dankbar.
Keine Kommentare:
Kommentar veröffentlichen