info-ruler

by Vladimir

HTML

<select class="info-ruler">
    <option value="info-1">Info 1</option>
    <option value="info-2">Info 2</option>
    <option value="info-3">Info 3</option>
</select>
<div class="info" id="info-1">Information block 1</div>
<div class="info" id="info-2">Information block 2</div>
<div class="info" id="info-3">Information block 3</div>

CSS

.info {
    display: none;
}

JavaScript

function changeVisibility() {
    var id = $('.info-ruler').val();
    $('.info').hide();
    $('#' + id).show();
}

$('.info-ruler').change(changeVisibility);
changeVisibility();