Dienstag, 22. November 2011

Magento FAQ Accordion Slider

Um ein FAQ Slider oder so eine Art Accordion in eine Magento Seite zu integrieren, einfach den Folgenden code als custom code eintragen:

<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: