var ulOptions = '<ul id="options"> <li><a href="#" class="all">Alle</a></li> <li><a href="#" class="sds">Save Disney Shows</a></li> <li><a href="#" class="dc">Disney Channel</a></li> <li><a href="#" class="dxd">Disney XD</a></li> </ul><br style="clear:both" />';
var $links = $('#events');

$links.before(ulOptions)
            .children('ul, h2, p, h3, table')
          .addClass('all')

$('#options li a').click(function() {
    var $this = $(this),
        type = $this.attr('class');

    $links.children('ul, h2, p, h3, table')
        .hide()
        .filter('.' + type)
        .show()
                
    return false;
});

  $(document).ready(
        function()
        {
            //Hide all the answers on page load.
            $('.details').hide();

            //For all questions, add 'open'/'close' text.
            //You can replace it with an image if you like.
            //This way, you don't need to specify img tag in your HTML for each question.
            $('.title')
                .append(' <img src="./images/pages/events/icon-closed.png" alt="" style="margin-bottom: -3px;" />');


            //Now there are two ways to toggle the visibility of answer.
            //Either click on the question OR click on Open All / Close All link.
            //To use the same code for both instances, we will create
            //a function which will take the 'question' div and toggle the answer for it.
            //Advantage of this approach is that the code to toggle the answer is in
            //one place.

            //By default, this function will try to toggle the status of the answer
            //i.e. if it's visible, hide it otherwise show it.
            //This function will take a second argument called 'showAnswer'.
            //If this argument is passed, it overrides the toggle behavior.
            //If 'showAnswer' is true, answer is shown.
            //If it's false, answer is hidden.
            //This second parameter will be used by the 'openAll', 'closeAll' links.
            var toggleAnswer = function toggleAnswer(question, showAnswer)
            {
                //The way I have structured the HTML, answer DIV is right after
                //question DIV.
                var $answer = $(question).next('.details');

                //Animation callback, after the animation is done, we want to
                //switch the 'text' to display what could the user do with the question.
                //Once again, you can change this code to show open/close image.
                var updateText = function()
                                {
                                    var text = $answer.is(':visible') ? './images/pages/events/icon-open.png' : './images/pages/events/icon-closed.png';
                                    $(question).find('img').attr('src', text);
                                }

                var method = null;

                if(arguments.length > 1)
                {
                    //If the function was called with two arguments, use the second
                    //argument to decide whether to show or hide.
                    method = showAnswer === true ? 'show' : 'hide';
                }
                else
                {
                    //Second argument was not passed, simply toggle the answer.
                    method = $answer.is(':visible') ? 'hide' : 'show';
                }

                $answer[method]('fast', updateText);
            };

            //On each question click, toggle the answer.
            //If you have noticed, I didn't enclose both Q&A inside one DIV.
            //The way you have done if user clicks on the answer, answer will collapse.
            //This may not be desirable as user may want to copy the answer
            //and he won't be able to.
            $('.title').click(function(){ toggleAnswer(this);});

            //We will reuse the same toggleAnswer method in openAll, closeAll
            //handling. This way, if you want to change behavior of how the question/answers
            //are toggled, you can do it in one place.
            $('#openClose').click(
                function()
                {
                    var showAnswer = $(this).html().toLowerCase().indexOf('open') != -1 ? true : false;
                    $('.question').each(function() { toggleAnswer(this, showAnswer); });
                    $(this).html(showAnswer ? 'Close All' : 'Open All');
                    return false;
                }
            );

        }
    );