Hey! Just right click -> View source and look for the <!-- SHOW/HIDE CODE --> comment, and copy everything until you see <!-- STOP COPYING --> Check out the documentation for toggle, a JQuery function, to learn more about how this works. By the way, if an anchor element doesn't work for you, you can also use a button.

// Custom slider adding code. Copy this!

    $(document).ready(function() {

var self = this;

this.tools = {};

this.tools.addSlider = function(slider) {

    var sliderstr = '<td class="preftitle">' + slider.text + '</td>';

    sliderstr += '<td class="pref">';

    if (typeof(slider.pred) != 'undefined') {

        sliderstr += '<div class="prefbox prefpred" style="display: block;">';

        sliderstr += '<div class="leftbg"></div>';

        sliderstr += '<div class="rightbg"></div>';

        var width = (slider.pred / 100.0) * 50;

        var right = slider.pred > 50 ? 'right: 50%;' : 'left: 50%;';

        sliderstr += '<div class="colorbar" style="width:' + width + '%;' + right + 'background-color: ' + slider.color + ';"></div>';

        sliderstr += '<div class="plus">+</div>';

        sliderstr += '<div class="minus">--</div>';

        sliderstr += '</div>';

    }

    if (typeof(slider.prey) != 'undefined') {

        sliderstr += '<div class="prefbox prefprey" style="display: none;">';

        sliderstr += '<div class="leftbg"></div>';

        sliderstr += '<div class="rightbg"></div>';

        var width = Math.abs((slider.prey / 100.0) * 50);

        var right = slider.prey > 50 ? 'right: 50%;' : 'left: 50%;';

        sliderstr += '<div class="colorbar" style="width:' + width + '%;' + right + 'background-color: ' + slider.color + ';"></div>';

        sliderstr += '<div class="plus">+</div>';

        sliderstr += '<div class="minus">--</div>';

        sliderstr += '</div>';

    }

    sliderstr += '</td>';

    sliderstr += '<td class="prefdetail">';

    if (typeof(slider.comments.pred) != 'undefined') {

        sliderstr += '<div class="prefpred" style="display: none;">' + slider.comments.pred + '</div>';

    }

    if (typeof(slider.comments.prey) != 'undefined') {

        sliderstr += '<div class="prefprey" style="display: inline;">' + slider.comments.prey + '</div>';

    }



    $('<tr></tr>').appendTo("div#pref-sliders-swap tbody")

        .html(sliderstr);

};



// And here's how to use it!

(function() {

    self.tools.addSlider({

        text: 'Custom Slider',

        pred: 90,

        prey: -90,

        color: 'red',

        comments: {

            pred: 'test pred comment',

            prey: 'test prey comment'

        }

    });

})();

});