Bullet enhancements

Two plugins which can make bullet points look great.

by nathan

HTML

<ul>
    <li>
        <span><b>Emphasise</b> the first few words of each point.</span>
        <div>
            Making the first word or few words of each point bold makes it easy to scan.
        </div>
    </li>
    <li>
        <span><b>Get the point across</b> with the emphasized part of the point.</span>
        <div>
            The emphasized point should be enough for the reader to understand what the point is saying.
        </div>
    </li>
    <li>
        <span><b>Put it in context</b> and ensure that it makes sense with the un-emphasized part.</span>
        <div>
            The emphasized part on its own doesn't need to make sense... that's what the rest of the sentence is for. It can also help to put it in context.
        </div>
    </li>
    <li>
        <span><b>Go into more detail</b> in the expandable box underneath each point.</span>
        <div>
            Use this box to describe the point in more detail. You can give figures to demonstrate how your achievement benefited the employer, or show examples of your work.
        </div>
    </li>
</ul>

CSS

body {
    font-family: Calibri, sans-serif;
}
ul>li>span>b {
    font-weight: bold;
}
ul>li>span:hover {
    color: blue;
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: pointer;
}
ul>li>div {
    padding: 0.7em 2em;
    margin: 0.6em 0 1em 0;
    background-color: rgb(255,255,220);
    display: none;
}

JavaScript

(function ($) {
    $.fn.toggleSlideAndFade = function(callback, speed, easing) {
        return this.each(function() {
            if ($(this).is(':hidden')) {
                $(this).css('opacity','0');
                return $(this).slideDown(speed, easing)
                    .fadeTo(speed, 1, easing, callback);
            }
            else {
                // Dequeue to prevent an uncomfortable wait
                return $(this)
                    .fadeTo(speed, 0, easing, callback)
                    .slideUp(speed,easing,callback)
                    .dequeue();
            }
        });
    };
    $.fn.clickableBoxes = function(options) {
        options = $.extend({
            toggleEffect : 'toggle'
        }, options);
        var all = this.children('li').children('div');
        return this.each(function() {
            $(this).children('li').children('span').click(function() {
                var divElement = $(this).closest('li').children('div');
                if (divElement.is(':hidden')) {
                    all.not(':hidden')[options.toggleEffect]();
                }
                divElement[options.toggleEffect]();
            });
        });
    };
}(jQuery));

$(function() {
    $('ul').clickableBoxes({
        toggleEffect : 'toggleSlideAndFade'
    });
});