Hide/Show Text

HTML

<form action="" method="POST">
    <h4> Select field</h4>
    <br />
    <div id="myDiv">
    <input data-div-class="hide" class="check_app" type="checkbox" />
    <input data-div-class="hide2" class="check_app2" type="checkbox" />
    <input class="check_app3" type="checkbox" />
</div>
<div class="hide">
TEXT 1:    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.
</div>

<div class="hide">
TEXT 2:    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.
</div>
    <br />
<button id="submitbutton" type="submit" name="action" value="submit">Send in Request</button>
    
</form>

CSS

.hide {
    display: none;
}

JavaScript

function Checkbox_OnChange() {
    // new approach, get the index of the checkbox based on the "set"
    // it belongs to
    var cbIndex = $("#myDiv>input[type=checkbox]").index($(this));
    
    // use that index to toggle the div of text; this assume a 1-to-1 mapping
    // of input[type=checkbox] to div, notice all divs with paragraph text
    // have the same class name so that we can retrieve the appropriate 
    // set of DIV elements.
    $("div.hide:eq("+cbIndex+")").fadeToggle();
}
$("input[type=checkbox]").on("click", Checkbox_OnChange);