How to keep a table hidden on load and then show it on button click

Question

Hi I am trying to achieve the hiding and showing the table. while loading the page table should be hide and when I click button it has to visible. for that I have created a table under div and created a button and created script function. Here is table with div //div for table Name of Company Address of Company Company Phone Number

Code for button,

<asp:Button ID="AddMore_Button" runat="server" Text="Add More" class="btn btn-primary" OnclientClick="AddMore_Button"/>   //button for displaying table

when I click the button nothing happens. Here the script,

<script>
            $(document).ready(function () {
                $('#AddMoreDetails').hide()
                $('#AddMore_Button').click(function () {
                    $("#AddMoreDetails").fadeToggle('fast');
                });
            });
            </script> 

While page loading table is hiding but when I click button it is not triggering. Any help..??

Answer 1

the code you wrote works fine: https://jsfiddle.net/n3n82epr/

$(document).ready(function () { $('#AddMoreDetails').hide() $('#AddMore_Button').click(function () { $("#AddMoreDetails").fadeToggle('fast'); }); });

Maybe your HTML code has some incorrect tags inside. You can check your page with : https://validator.w3.org/

Answer 2

Your code should work fine. The table will be visible on page load till the scripts run. So its better to add a style display:none to table.

Answer 3

your code works fine, please check your id/class name that you are specifying

    $(document).ready(function(){
     $('p').hide();
          $("button").click(function(){
            $("p").fadeToggle('fast');
    });
});