如何根据按钮的值显示/隐藏Div on click事件

Question

Am working on mock test portal project, Can you suggest me how to show or hide a div based on the value of button.

Html code ##

<input type='button' value='Generate' onclick='f1(this)' />

Div section

<div id="sub_section" class="col s6" style="display:none">
 <TABLE STYLE="BORDER:2PX; BACKGROUND-COLOR:BLACK;">
 <TR>
 <td><label style="color:black;">TAMIL</label></td>
 </TR>
 </TABLE>   
 </div>
 </div>

jquery

function f1(objButton){  
var a=objButton.val;
   if(var a=='Generate')
    $("#sub_section").show();
}

jquery min.js

<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

Answer 1

The following example will demonstrate you how to show and hide div elements based on the clicking of button. You can use toggle() function or show(), hide() function

$(document).ready(function(){
    $('input[type="button"]').click(function(){
        var inputValue = $(this).attr("value");
        $("." + inputValue).toggle();
    });
});

.box{
   color: #fff;
   padding: 20px;
   display: none;
   margin-top: 20px;
}
.red, .redbtn{ background: #ff0000; }
.green, .greenbtn{ background: #228B22; }
.blue, .bluebtn{ background: #0000ff; }
label{ margin-right: 15px; }
.btn { 
   width: 100px;
   height: 30px;
   font-size: 20px;
   font-weight: 600;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <label><input type="button" class="btn redbtn" value="red" />
   <label><input type="button" class="btn greenbtn" value="green" />
   <label><input type="button" class="btn bluebtn" value="blue" />
</div>
<div class="red box">You have selected <strong>red button</strong> so i am here</div>
<div class="green box">You have selected <strong>green button</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue button</strong> so i am here</div>

</div>