Telerik Academy CSS Exam-Variant 2

task1

HTML

<body>
    <div id="wrapper">
        <ul class="accordion">
            <li class="current">
                <a href="#" class="accordion-btn">Label 0</a>
                <div class="accordion-content">
                    content 0
                </div>
            </li>
            <li>
                <a href="#" class="accordion-btn">Label 1</a>
                <div class="accordion-content">
                    <h1>The item content 1</h1>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
            </li>
            <li>
                <a href="#" class="accordion-btn">Label 2</a>
                <div class="accordion-content">
                    <h1>The item content 2</h1>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
            </li>
            <li class="current">
                <a href="#" class="accordion-btn">Label 3</a>
                <div class="accordion-content">
                    <table>
                        <thead>
                            <tr>
                                <th>Title 0
                                </th>
                                <th>Title 1
                                </th>
                                <th>Title 2
                                </th>
                                <th>Title 3
                                </th>
                                <th>Title 4
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Value 0</td>
                                <td>Value 1</td>
                                <td>Value 2</td>
             ...

CSS

* {
    margin:0;
    padding:0;
}

div#wrapper {
    width:960px;
    font-family: Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
    font-size:18px;
    margin-left:50px;
    margin-top:50px;
}
div#wrapper ul.accordion{
    width:400px;
    text-align:center;
}

div#wrapper ul.accordion li {
    list-style-type:none;
    background:#AAAAAA;
    border:1px solid black;
}
   

div#wrapper ul.accordion li a.accordion-btn{
    display:inline-block;
    width:100%;
    text-decoration:none;
    font-weight:bold;
     color:#444444;
     font-size:1.3em;
    
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(40, #EEEEEE), color-stop(80, #AAAAAA));
    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #EEEEEE 40%, #AAAAAA 80%);
    /* W3C Markup */ 
    background-image: linear-gradient(to bottom, #EEEEEE 40%, #AAAAAA 80%);
}

 div#wrapper ul.accordion li a:hover {
        background:#AAAAAA;
    }
div#wrapper ul.accordion li div.accordion-content{
    display:none;
}

div#wrapper ul.accordion li.current div.accordion-content{
    display:block;
    text-align:left;
    padding-left:15px;
     padding-top:5px;
    padding-bottom:5px;
    color:#5E5E5E;
}

div.accordion-content h1 {
    text-align:center;
}

div.accordion-content p{
    word-spacing:6px;
}

div.accordion-content table {
    border:1px solid black;
    border-collapse:collapse;
    margin-top:15px;
    margin-left:5px;
    
}

div.accordion-content table thead {
    border:1px solid black;
}

div.accordion-content table thead tr th {
    border:1px solid black;
    padding:5px;
    color:#444444;
    
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E6E6E6), color-stop(100, #8C8C8C));
    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #E6E6E6 0%, #8C8C8C 100%);
    /* W3C Markup */ 
    background-image: linear-gradient(to bottom, #E6E6E6 0%, #8C8C8C...

JavaScript

(function () {
            $.fn.accordion = function () {
                var selector = this.selector;
                $(selector + " .accordion-btn").on("click", function (e) {

                    var isCurrent = $(this).parent().hasClass("current");

                    $(selector + " .current").removeClass("current");

                    if (!isCurrent) {
                        $(this).parent().addClass("current");
                    }
                    if (e.preventDefault) {
                        e.preventDefault();
                    }
                    return false;
                });
            };
        }).call(this);

        $(function onDocumentReady() {
            $(".accordion").accordion();
        });