CODEWITHSUNDEEP
jquery
user1527923
user1527923

Reputation: 67

Unable to hide/show div

I need to hide one div and show one div. I am new to Jquery but I've tried several methods that i could find. It still doesn't work and i have no idea. Anyone has any idea? Very much appreciated for your help.

<div id="div1" runat="server">
<asp:Button ID="btnCalculate" runat="server" Text="Calculate Claim" OnClientClick="cfrm();"/>
    </div>
    <div id="div2" runat="server" visible="false">

        <script language="javascript" type="text/javascript">
            function cfrm() {
                var fee = $('[id$=lblTotalProcedureFee]').text();
                if (fee > 500) {
                    if (confirm('You are making a claim exceeding $500. Are you sure to do this operation?')) {
                        $('#div1').hide('fast');
                        $('#div2').show();
                    }
                }
            }
    </script>

Upvotes: 0

Views: 1227

Answers (4)

softsdev
softsdev

Reputation: 1509

Add jquery library File

Example is here

HTML

<span class="tab">Click Here to See / Hide Hidden Output</span>
<div class="output">This is our Hidden output</div>

CSS 

.output{  display:none;  }
.tab{ bordar:1px solid;   background:#d0d0d0; cursor:pointer; padding:5px; }

Javascript 

$(document).ready(function(){
    $('.tab').click(function(){
      $('.output').toggle();
    });
});

Upvotes: 0

nbrooks
nbrooks

Reputation: 18233

For your specific code...your last line should invoke jQuery's show method

function cfrm() {
    //...
            $('#div1').hide('fast');
            $('#div2').show();
}

In general, you can use jQuery toggle to alternate visibility between two items

CSS

.hidden { display: none; }

HTML

<div id='d1' class='alternate'>Blah1</div>
<div id='d2' class='alternate hidden'>Blah2</div>
<button id='hideBtn'>Hide/Show</button>

JS

$(function() {
    $('#hideBtn').click( function() {
        $('.alternate').toggle();
    });
});

Upvotes: 0

CloudyMarble
CloudyMarble

Reputation: 37566

Use show() to show and hide() to hide

Upvotes: 0

Jai
Jai

Reputation: 74738

Try this:

You have to initially hide the other div

$('div').click(function(){
    $(this).hide();
    $(this).siblings().show();
});

Upvotes: 1

Related Questions