Show/Hide code for snippet

by andyjh07

HTML

<div class="accordion">
    <div class="accordionTrigger">
        Trigger
        <div class="accordionSlide">Slide 1</div>
    </div>
    <div class="accordionTrigger">
        Trigger
        <div class="accordionSlide">Slide 2</div>
    </div>
    <div class="accordionTrigger">
        Trigger
        <div class="accordionSlide">Slide 3</div>
    </div>
</div>

<h2 class="showCode">Show Code</h2>
<div class="codeHolder">
    <h4>HTML</h4>
    <xmp>
        <div class="accordion">
            <div class="accordionTrigger">
                Trigger
                <div class="accordionSlide">Slide 1</div>
            </div>
            <div class="accordionTrigger">
                Trigger
                <div class="accordionSlide">Slide 2</div>
            </div>
            <div class="accordionTrigger">
                Trigger
                <div class="accordionSlide">Slide 3</div>
            </div>
        </div>
    </xmp>
    <h4>CSS</h4>
    <pre>
        .accordionTrigger { cursor: pointer; }
        .accordionSlide { display: none; }
    </pre>
    <h4>jQuery</h4>
    <pre>
        $(document).ready(function(){
            var trigger = $('.accordionTrigger'),
                slide = $('.accordionSlide');
            
            trigger.on('click',function(){
                $(this).children().slideToggle();
                $(this).siblings().children().slideUp();
            });
        });
    </pre>
</div>

CSS

.accordionTrigger { cursor: pointer; }
.accordionSlide { display: none; }

.codeHolder { display: none; }

JavaScript

$(document).ready(function(){
    var trigger = $('.accordionTrigger'),
        slide = $('.accordionSlide');
    
    trigger.on('click',function(){
        $(this).children().slideToggle();
        $(this).siblings().children().slideUp();
    });
    
    $('.showCode').on('click', function(){
        $(this).next('.codeHolder').fadeToggle();
    });
});