FAQ Toggle Plugin

by Trisox

HTML

<ul id="showHideToggle" class="faqToggle" 
    data-prefixmeer="<span>Meer details..</span>" 
    data-prefixminder="<span>Minder details..</span>" 
    data-hidetooltip="Verberg details" 
    data-showtooltip="Meer details" 
>
    <li>
        <div class="ToggleClosed">This is a question 1 <a href="http://google.com" target="_blank"> google</a></div>
        <div class="ToggleOpen">Here is the answer</div>
    </li>
    <li>
        <div class="ToggleClosed">This is a question 2</div>
        <div class="ToggleOpen">Here is the answer</div>
    </li>
    <li>
        <div class="ToggleClosed">This is a question 3</div>
        <div class="ToggleOpen">Here is the answer</div>
    </li>    
</ul>

CSS

h3 { font-size:18px; }
dl.faqToggle {}
dl.faqToggle dt { color:#0054a6; cursor:pointer; margin:0 0 .25em 0; }
dl.faqToggle dd {  }
.headerToggle { }
.prefixClosed { padding-right:3px; color:#FF6600 }
.prefixOpen { padding-right:3px; color:green; }

JavaScript

// showHideToggle
$.fn.showHideToggle = function() {
    return this.each(function(i) {
        var $this = $(this);
        var prefixMinder = $this.attr('data-prefixminder');
        var prefixMeer = $this.attr('data-prefixmeer');
        var showTooltip = $this.attr('data-showtooltip');
        var hideTooltip = $this.attr('data-hidetooltip');

        var closed = $this.find('li .ToggleClosed' );
        var open = $this.find('li .ToggleOpen');
        open.hide(); // hide open initially

        function clickToggle (){
            var answer = $(this).next('li .ToggleOpen');
            if (answer.is(":hidden")) {
                answer.slideDown('fast');
                $(this).attr("title", hideTooltip);
                $('.prefix',this).removeClass("prefixClosed").addClass("prefixOpen").html(prefixMinder);
            } else {
                $(this).attr("title", showTooltip);
                answer.slideUp('fast');
                $('.prefix',this).removeClass("prefixOpen").addClass("prefixClosed").html(prefixMeer);
            }
        }

        closed.each(function() {
            $(this).on('click', clickToggle);
            $(this).attr("title", showTooltip);
            $(this).wrapInner("<span class='headerToggle'  />");
            $(this).prepend("<a class='prefix prefixClosed' href='#'>" + prefixMeer + "</a>");
        });

        open.each(function() {
            $(this).on('click', clickToggle);
        });
    });
};
$('#showHideToggle').showHideToggle();