jube-fork/Jube.App/wwwroot/kendo/examples/collapsible/scenario.html

<div id="football-results" data-role="view" data-title="Premier League" data-use-native-scrolling="true">
    <div class="hero">PREMIER LEAGUE</div>
    <div data-role="collapsible">
        <h3 class="results-title">
            <span class="team-one"><img src="content/mobile/football/mancity.png" alt="Man City" />Man City</span>
            <span class="result">2-0</span>
            <span class="team-two"><img src="content/mobile/football/leicester.png" alt="Leicester" />Leicester</span>
        </h3>
        <table class="match-details">
            <tr>
                <td>
                    D.Silva <img src="content/mobile/football/ball.png" alt="Goal" />
                </td>
                <td>
                    45+2'
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    J.Milner <img src="content/mobile/football/ball.png" alt="Goal" />
                </td>
                <td>
                    88'
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
        </table>
    </div>
    <div data-role="collapsible">
        <h3 class="results-title">
            <span class="team-one"><img src="content/mobile/football/newcastle.png" alt="Newcastle" />Newcastle</span>
            <span class="result">0-1</span>
            <span class="team-two"><img src="content/mobile/football/manutd.png" alt="Man Utd" />Man Utd</span>
        </h3>
        <table class="match-details">
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    89'
                </td>
                <td>
                    <img src="content/mobile/football/ball.png" alt="Goal" /> A.Young
                </td>
            </tr>
        </table>
    </div>
    <div data-role="collapsible">
        <h3 class="results-title">
            <span class="team-one"><img src="content/mobile/football/tottenham.png" alt="Tottenham" />Tottenham</span>
            <span class="result">3-2</span>
            <span class="team-two"><img src="content/mobile/football/swansea.png" alt="Swansea" />Swansea</span>
        </h3>
        <table class="match-details">
            <tr>
                <td>
                    N.Chadli <img src="content/mobile/football/ball.png" alt="Goal" />
                </td>
                <td>
                    7'
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    19'
                </td>
                <td>
                    <img src="content/mobile/football/ball.png" alt="Goal" /> Ki Sung-yueng
                </td>
            </tr>
            <tr>
                <td>
                    R.Mason <img src="content/mobile/football/ball.png" alt="Goal" />
                </td>
                <td>
                    51'
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    A.Townsend <img src="content/mobile/football/ball.png" alt="Goal" />
                </td>
                <td>
                    60'
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    89'
                </td>
                <td>
                    <img src="content/mobile/football/ball.png" alt="Goal" /> G.Sigurdsson
                </td>
            </tr>
        </table>
    </div>
    <div data-role="collapsible">
        <h3 class="results-title">
            <span class="team-one"><img src="content/mobile/football/westham.png" alt="West Ham" />West Ham</span>
            <span class="result">0-1</span>
            <span class="team-two"><img src="content/mobile/football/chelsea.png" alt="Chelsea" />Chelsea</span>
        </h3>
        <table class="match-details">
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    22'
                </td>
                <td>
                    <img src="content/mobile/football/ball.png" alt="Goal" /> E.Hazard
                </td>
            </tr>
        </table>
    </div>
    <div data-role="collapsible">
        <h3 class="results-title">
            <span class="team-one"><img src="content/mobile/football/liverpool.png" alt="Liverpool" />Liverpool</span>
            <span class="result">2-0</span>
            <span class="team-two"><img src="content/mobile/football/burnley.png" alt="Burnley" />Burnley</span>
        </h3>
        <table class="match-details">
            <tr>
                <td>
                    J.Henderson <img src="content/mobile/football/ball.png" alt="Goal" />
                </td>
                <td>
                    29'
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    D.Sturridge <img src="content/mobile/football/ball.png" alt="Goal" />
                </td>
                <td>
                    51'
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
        </table>
    </div>
    <div data-role="collapsible">
        <h3 class="results-title">
            <span class="team-one"><img src="content/mobile/football/stoke.png" alt="Stoke" />Stoke</span>
            <span class="result">2-0</span>
            <span class="team-two"><img src="content/mobile/football/everton.png" alt="Everton" />Everton</span>
        </h3>
        <table class="match-details">
            <tr>
                <td>
                    V.Moses <img src="content/mobile/football/ball.png" alt="Goal" />
                </td>
                <td>
                    32'
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    M.Diouf <img src="content/mobile/football/ball.png" alt="Goal" />
                </td>
                <td>
                    84'
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
        </table>
    </div>
</div>
<style>
    #football-results .hero {
        display: block;
        margin: 0;
        padding-left: .5em;
        height: 110px;
        line-height: 110px;
        font-size: 0.611em;
        color: rgba(255,255,255,.85);
        text-align: center;
        text-transform: uppercase;
        letter-spacing: .2em;
        background: url(content/mobile/shared/grass.jpg) no-repeat center center;
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
    }
    .results-title {
        padding: 0;
        text-align: center;
        font-size: 0.476em;
    }
    .results-title .km-icon {
        font-size: 1em;
    }
    .results-title .result {
        display: inline-block;
        width: 2.815em;
    }
    .results-title .team-one,
    .results-title .team-two {
        display: inline-block;
        width: 5.9em;
        text-align: right;
        font-weight: normal
    }
    .results-title .team-two {
        text-align: left;
    }
    .results-title .team-one img,
    .results-title .team-two img {
        position: relative;
        top: 1.4em;
        width: 0.8em;
        float: left;
    }
    .results-title .team-two img {
        float: right;
    }
    .match-details {
        width: 100%;
        text-align: center;
    }
    .match-details img {
        width: 0.8em;
    }
    .match-details td {
        width: 20%;
    }
    .match-details td:first-child,
    .match-details td:last-child {
        width: 40%;
        text-align: right;
    }
    .match-details td:last-child {
        text-align: left;
    }
</style>