How to make visible elements by selecting other elements?

Question

I've made a horizontal menu of four labels with <ul>.

There is a <div class="content"> linked with each label. The first label is visible, the other three are hidden. I want to make only visible the whose label I select.

I've tried with the :hover and :select, but I can't solve this.

My code: http://jsfiddle.net/Trimax/69YcC/

<div id="labels-menu">
    <ul>
        <li><a href="#1">Label 1</a>

        </li>
        <li><a href="#2">Label 2</a>

        </li>
        <li><a href="#3">Label 3</a>

        </li>
        <li><a href="#4">Label 4</a>

        </li>
    </ul>
</div>
<div id="container">
    <div id="label-1" class="content">
        <div class="left">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac eleifend lorem. Ut vitae dictum lectus, id fringilla justo. Duis ullamcorper leo nec lorem rutrum, vulputate volutpat metus scelerisque. Morbi elementum nunc auctor, feugiat urna et, ornare dolor.</p>
        </div>
        <div class="right">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac eleifend lorem. Ut vitae dictum lectus, id fringilla justo. Duis ullamcorper leo nec lorem rutrum, vulputate volutpat metus scelerisque. Morbi elementum nunc auctor, feugiat urna et, ornare dolor.</p>
        </div>
    </div>
    <div id="label-2" class="content">
        <div class="left">
            <p>Pellentesque rhoncus ornare arcu et vulputate. Morbi sit amet lorem mollis, placerat sapien sit amet, aliquet neque. Vestibulum pellentesque fringilla tortor, in accumsan sapien mattis sit amet. Aliquam tellus enim, tincidunt sit amet elit non, scelerisque venenatis justo.</p>
        </div>
        <div class="right">
            <p>Pellentesque rhoncus ornare arcu et vulputate. Morbi sit amet lorem mollis, placerat sapien sit amet, aliquet neque. Vestibulum pellentesque fringilla tortor, in accumsan sapien mattis sit amet. Aliquam tellus enim, tincidunt sit amet elit non, scelerisque venenatis justo.</p>
        </div>
    </div>
    <div id="label-3" class="content">
        <div class="left">
            <p>Donec hendrerit tellus metus, adipiscing placerat purus ultricies id. Maecenas magna sem, convallis eu aliquet vitae, pretium rhoncus leo.</p>
        </div>
        <div class="right">
            <p>Donec hendrerit tellus metus, adipiscing placerat purus ultricies id. Maecenas magna sem, convallis eu aliquet vitae, pretium rhoncus leo.</p>
        </div>
    </div>
    <div id="label-4" class="content">
        <div class="left">
            <p>Aliquam ornare suscipit purus, eu elementum nulla semper a. Praesent varius euismod augue vitae luctus. Integer venenatis sollicitudin felis semper scelerisque. Vivamus ultrices congue tristique.</p>
        </div>
        <div class="right">
            <p>Aliquam ornare suscipit purus, eu elementum nulla semper a. Praesent varius euismod augue vitae luctus. Integer venenatis sollicitudin felis semper scelerisque. Vivamus ultrices congue tristique.</p>
        </div>
    </div>
</div>

Is there a way to do this with only CSS?

Answer 1

According to my science there is only one way to solve it and that is to use radio or check buttons but the problem is that the container height will be fixed.