CODEWITHSUNDEEP
javascriptjqueryhtml
Dinav Ahire
Dinav Ahire

Reputation: 583

make div invisible and visible on button click using jquery

i have one button and on the click of that button, i have one div to show and hide. i have achieved it using jquery. but problem is when page loads, div is already shown. and i want that, if i click on button then only div should be visible.

this is my code:

script:

<script>
$(document).ready(function() {
    $('#btn').live('click', function(event) {

        $('#div1').toggle('show');

    });
});
</script>

html :

<input type="button" id="btn" class="btncss" value="filter" />
<div id="div1" runat="server"  style="height:300px;width:300px;background-color:#f3fbd6">
    <table>
        <tr>
            <td>
                <asp:TextBox ID="txt" runat="server" TextMode="MultiLine"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <asp:DropDownList ID="ddl" runat="server"></asp:DropDownList>
            </td>
        </tr>
    </table>
    <hr />
    <table>
        <tr>
            <td>
                <asp:Button ID="btncancel" runat="server" Text="cancel" />
            </td>
            <td>
                <asp:Button ID="btnFilter" runat="server" CssClass="btncss" Text="Filter" />
            </td>
        </tr>
    </table>
</div>

Upvotes: 4

Views: 8173

Answers (4)

koorosh safeashrafi
koorosh safeashrafi

Reputation: 309

you can use this

$('input').click(function() {
   if ($('input').val() === "show") {
      $('#div1').show('700');
      $('input').val("hide");
   } else{
      $('#div1').hide('700');
      $('input').val("show");
   };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input type="button" id="btn" class="btncss" value="show" />
        <div id="div1" runat="server" style="height:300px;width:300px;background-color:#f3fbd6; display: none;">
            <table>
                <tr>
                    <td>
                    <asp:TextBox ID="txt" runat="server" TextMode="MultiLine"></asp:TextBox>
                    </td>
                </tr>

                <tr>
                    <td>
                        <asp:DropDownList ID="ddl" runat="server"></asp:DropDownList>
                    </td>
                </tr>
            </table>
            <hr />
            <table>
                <tr>
                    <td>
                        <asp:Button ID="btncancel" runat="server" Text="cancel" />
                    </td>
                    <td>
                        <asp:Button ID="btnFilter" runat="server" CssClass="btncss" Text="Filter" />
                    </td>
                </tr>
            </table>
        </div>

set display: none; for #div1 and use my script

Upvotes: 1

Satpal
Satpal

Reputation: 133453

As your #div1 element has the runat="server" means you are using so you should use Control.ClientID

a CSS class should be used to hide the element along with rest of CSS rules

.myDiv {
    display: none; //Hide it using CSS
    height:300px;
    width:300px;
    background-color:#f3fbd6;
}

HTML, Add the CSS class to div 

<div id="div1" runat="server" class="myDiv">
</div>

Script

$('#btn').live('click', function (event)
    $('.myDiv').toggle();
    //Or, You can use Control.ClientID
    $("#<%= div1.ClientID %>").toggle();
});

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337713

Use CSS to hide it by default:

#div1 {
    display: none;
}

Note that jQuery's live() method is deprecated, and shouldn't be used. It was replaced by on(). Also, your #div1 element has the runat="server" attribribute set on it, which means ASP.Net will automatically generate an id attribute for that element at run time. You will need to retrieve that id using the ClientID method:

$(document).on('click', '#btn', function() {
    $('#<%= div1.ClientID %>').toggle();
});

Upvotes: 4

Nikhil Batra
Nikhil Batra

Reputation: 3148

You should use CSS to set display:none to the #div1. Use:

#div1{
   display:none;
}

Even though it is not preferred you can use JS to hide your div on page load inside document.ready(), so use .hide() and your script becomes:

<script>
        $(document).ready(function ()
        {
         $('#div1').hide(); //ADD THIS
         $('#btn').live('click', function (event)
            {

                $('#div1').toggle('show');

            });
        });
    </script>

Upvotes: 2

Related Questions