cssOMS/tests/app/tabs.php

<div class="row">
    <div class="col-xs-12">
        <div class="box wf-100">
            <h1>Horizontal tabs</h1>
            <div class="tabview tab-1">
                <ul class="tab-links">
                    <li class="active"><label for="c-tab-1">Tab 1</label>
                    <li><label for="c-tab-2">Tab 2</label>
                </ul>
                <div class="tab-content">
                    <input type="radio" id="c-tab-1" name="tabular-1" checked>
                    <div class="tab">
                        Test content
                    </div>
                    <input type="radio" id="c-tab-2" name="tabular-1">
                    <div class="tab">
                        <p>Test content 2</p><p>asdf</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div class="box wf-100">
            <h1>Vertical tabs</h1>
            <div class="tabview tab-1 left">
                <ul class="tab-links">
                    <li class="active"><label for="c-tab-1-2">Tab 1</label>
                    <li><label for="c-tab-2-3">Tab 2</label>
                </ul>
                <div class="tab-content">
                    <input type="radio" id="c-tab-1-2" name="tabular-3" checked>
                    <div class="tab">
                        Test content
                    </div>
                    <input type="radio" id="c-tab-2-3" name="tabular-3">
                    <div class="tab">
                        <p>Test content 2</p><p>asdf</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div class="box wf-100">
            <h1>Horizontal tabs2</h1>
            <div class="tabview tab-2">
                <ul class="tab-links">
                    <li><label for="c-tab2-1">Tab 1</label>
                    <li class="active"><label for="c-tab2-2">Tab 2</label>
                </ul>
                <div class="tab-content">
                    <input type="radio" id="c-tab2-1" name="tabular-2" checked>
                    <div class="tab">
                        Test content
                    </div>
                    <input type="radio" id="c-tab2-2" name="tabular-2">
                    <div class="tab">
                        <p>Test content 2</p><p>asdf</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div class="box wf-100">
            <h1>Vertical tabs 2</h1>
            <div class="tabview tab-2 left">
                <ul class="tab-links">
                    <li class="active"><label for="c-tab-4-2">Tab 1</label>
                    <li><label for="c-tab-4-3">Tab 2</label>
                </ul>
                <div class="tab-content">
                    <input type="radio" id="c-tab-4-2" name="tabular-4" checked>
                    <div class="tab">
                        Test content
                    </div>
                    <input type="radio" id="c-tab-4-3" name="tabular-4">
                    <div class="tab">
                        <p>Test content 2</p><p>asdf</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <h1>Accordion</h1>
        <div class="box ac-container wf-100">
            <input type="checkbox" name="About us" id="ac-1">
            <label for="ac-1">About us</label>
            <section>
                <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show
                    that show to the people who make shows, and on the strength of that one show they decide if
                    they're going to make more shows.</p>
            </section>
            <input type="checkbox" name="About us" id="ac-2">
            <label for="ac-2">How we work</label>
            <section>
                <p>Like you, I used to think the world was this great place where everybody lived by the same
                    standards I did, then some kid with a nail showed me I was living in his world, a world where
                    chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if
                    you're not willing to play by his rules, then you're gonna have to pay the price. </p>
            </section>
            <input type="checkbox" name="About us" id="ac-3" checked>
            <label for="ac-3">References</label>
            <section>
                <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it
                    killed the world once and got a taste for murder. After the avalanche, it took us a week to
                    climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us
                    survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
                    said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
                    doesn't hold a candle to man. </p>

                <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it
                    killed the world once and got a taste for murder. After the avalanche, it took us a week to
                    climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us
                    survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
                    said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
                    doesn't hold a candle to man. </p>
            </section>
            <input type="checkbox" name="About us" id="ac-4">
            <label for="ac-4">Contact us</label>
            <section>
                <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell
                    everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in
                    the future when the spacecraft encounters a black hole does the computer call it an 'unknown
                    entry event'? Why don't they know? If they don't know, that means we never told anyone. And if
                    we never told anyone it means we never made it back. Hence we die down here. Just as a matter of
                    deductive logic. </p>
            </section>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div class="portlet">
            <div class="portlet-head">More/detail area</div>
            <div class="portlet-body">
                <div class="more-container">
                    <input id="more-customer-region" type="checkbox">
                    <label for="more-customer-region">
                        <span>Click here!</span>
                        <i class="g-icon expand">chevron_right</i>
                    </label>
                    <div>
                        <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell
                    everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in
                    the future when the spacecraft encounters a black hole does the computer call it an 'unknown
                    entry event'? Why don't they know? If they don't know, that means we never told anyone. And if
                    we never told anyone it means we never made it back. Hence we die down here. Just as a matter of
                    deductive logic. </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>