how to show hide div in bootstrap and asp.net using jquery

Question

0.00/5 (No votes)

See more:

I have a following code with me and i tried to show hide iv but my code does not working properly please suggest me the corrections and thanks a lot for your helps and suggestions

Here is my code

XML

<div class="box-body">
            <div class="row">
                <div class="col-md-12" style="padding-right:25px">
                    <div class="form-group col-md-12">
                        <div class="col-md-4">
                        <br />
                            <asp:Checkbox ID="chk_pf" runat="server" Text="Provident Fund" Value="pf" ClientIDMode="Static" onclick="showpf()"></asp:Checkbox>
                        </div>


                        <div class="pf" style="display:none">
                        <div class="col-md-4">
                            <label> PF From Employee : </label>
                        <asp:TextBox ID="txt_pf_employee" runat="server" CssClass='form-control' placeholder="PF From Employee"></asp:TextBox>
                        </div>

                        <div class="col-md-4">
                            <label> PF From Employer : </label>
                        <asp:TextBox ID="txt_pf_employer" runat="server" CssClass='form-control' placeholder="PF From Employer"></asp:TextBox>
                        </div>
                        </div>
                    </div>
 </div>
 </div>
 </div>

Here is code for the jquery

XML

<script type="text/javascript">

            function showpf(){
            if ($('#<%=chk_pf.ClientID %>').is(':Checked')) {
                $(".pf").show();
            }
            else {
                $(".pf").hide();
            }
        }
</script>

Posted 25-Aug-14 23:57pm

Omkar Hendre

Updated 25-Aug-14 23:58pm

v2

Add a Solution

Comments

Kumarbs 26-Aug-14 6:17am

No issue in your code. Please check once and provide the feedback. Make sure the showpf() method not in the document.ready() method (i don't think so it is). Check the console screen in the browser if you are getting any error.

Omkar Hendre 26-Aug-14 7:29am

Sir i am not getting any error but still my code is not working is there is any need of jquery file which i should attached or referr

Kumarbs 27-Aug-14 5:20am

Didn't refer any jquery file? You should refer a jquery file in order to work for that.
You can refer this jquery.
http://code.jquery.com/jquery-1.11.0.js

4 solutions

Solution 1

How about using onchange event instead of onclick event?

ASP.NET

<asp:checkbox id="chk_pf" runat="server" text="Provident Fund" value="pf" clientidmode="Static" onchange="showpf()" xmlns:asp="#unknown"></asp:checkbox>

Posted 26-Aug-14 0:31am

David Lee 145

Comments

Omkar Hendre 26-Aug-14 7:29am

onchange() is also not working

Solution 2

Copy and Paste the below code. it will work for you but make sure you are pointing out the jquery file in the HEAD section.

JavaScript

<script type="text/javascript">
 
            function showpf(){
            if ($('#<%=chk_pf.ClientID %>').is(':checked')) {
                $(".pf").show();
            }
            else {
                $(".pf").hide();
            }
        }
</script>

You just use Uppercase C in ":Checked" which should be Lowercase ":checked"

Hope it helps :)

Posted 26-Aug-14 1:07am

Sanket Saxena

Updated 27-Aug-14 3:36am

v5

Comments

Omkar Hendre 26-Aug-14 7:30am

Sorry sir i tried as you said but not working for me

Sanket Saxena 26-Aug-14 8:19am

Could u plz put an alert and check your checked event is fired or not also check console

Sanket Saxena 26-Aug-14 8:29am

Check my new solution...u just wrote the "checked" property to "Checked" (Uppercase C should be Lowercase c)

Solution 3

Try below code.

JavaScript

<script type="text/javascript">
 $(document).ready(function {
$('#<%=chk_pf.ClientID %>').on('change', showpf);
});
            function showpf(){
            if ($('#<%=chk_pf.ClientID %>').is(':Checked')) {
                $(".pf").show();
            }
            else {
                $(".pf").hide();
            }
        }
    </script>

Posted 26-Aug-14 2:54am

David Lee 145

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**Jaimin H. Soni** · Accepted Answer · 2014-08-27T23:00:00

Solution 4

// for show try this

JavaScript

$(".pf").removeAttr('style');

// for Hide try this

JavaScript

$(".pf").css('display','none');

Posted 27-Aug-14 23:00pm

Jaimin H. Soni