content of a div based on selection from drop down menu

by lovromar

HTML

<select class="div-toggler" data-target=".my-info-1">
    <option value="">Select a fruit...</option>
    <option value="orange" data-show=".citrus">Orange</option>
    <option value="lemon" data-show=".citrus">Lemon</option>
    <option value="apple" data-show=".pome">Apple</option>
    <option value="pear" data-show=".pome">Pear</option>
</select>

<div class="my-info-1">
    <div class="citrus hide">Citrus is a common term and genus (Citrus) of flowering plants in the rue family, Rutaceae.</div>
    <div class="pome hide">In botany, a pome (after the Latin word for fruit: pōmum) is a type of fruit produced by flowering plants in the subtribe Malinae of the family Rosaceae.</div>
</div>

CSS

.hide {
    display: none;
}

JavaScript

$('select.div-toggler').change(function(){
    var target = $(this).data('target');
    $(target).children().addClass('hide');
    var show = $("option:selected", this).data('show');
    $(show).removeClass('hide');
});