CODEWITHSUNDEEP
phpjquery
Tamil
Tamil

Reputation: 25

how to show/hide Div on click event based on the value of button

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>

Upvotes: 0

Views: 2257

Answers (5)

AdminDev826
AdminDev826

Reputation: 330

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>

Upvotes: 1

Neelotpal
Neelotpal

Reputation: 347

objButton is a button, it will not have a value. You need to provide a text box for text value or if you need value of the button you could write something like $(objButton).attr('value') === "Generate"

Upvotes: 0

ankita patel
ankita patel

Reputation: 4251

Try this.

function f1(objButton){  
var a = objButton.value;
   if(a =='Generate')
    $("#sub_section").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<div id="sub_section" class="col s6" style="display:none">
<table style="border:2px; background-color:black;">
 <tr>
  <td><label style="color:white;">TAMIL</label></td>
 </tr>
</table>   
</div>

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

You can either do it like $(objButton).val() aka jQuery or objButton.value aka plain js

Also remove var from your if statement if (var a == 'Generate')

Example of jQuery below.

function f1(objButton) {
  var a = $(objButton).val();
  if (a == 'Generate')
    $("#sub_section").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' value='Generate' onclick='f1(this)' />


<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>

Upvotes: 1

pavel
pavel

Reputation: 27072

.val is bad, you can't get value from element this way.

Use .value for plain JS, or .val() for jQuery.

Upvotes: 1

Related Questions