{"id":33275,"date":"2023-02-06T04:11:09","date_gmt":"2023-02-05T22:41:09","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-jquery-add-html-content-in-hidden-div-closed\/"},"modified":"2023-02-06T04:11:09","modified_gmt":"2023-02-05T22:41:09","slug":"solved-jquery-add-html-content-in-hidden-div-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-jquery-add-html-content-in-hidden-div-closed\/","title":{"rendered":"[Solved] jQuery add html content in hidden div [closed]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

You can use jQuery’s hide() and show() function to accomplish this, which is a little cleaner than the .css() ZeJur used. Have a look at my Plunker example<\/a><\/p>\n

Example:<\/p>\n

<div class=\"hiddenContent\">I am hidden div<\/div>    \n<button class=\"addDynamicContent\">Add dynamic content to div - hide while doing<\/button>\n<\/code><\/pre>\n
Script:<\/p>\n
<script>\n$('.addDynamicContent').click(function() {\n        $.ajax({\n          url: \"http:\/\/api.icndb.com\/jokes\/random\",\n          beforeSend: function() {\n            $('.hiddenContent').hide();\n            console.log('I hide before request');\n          },\n          success: function(response) {\n            $('.hiddenContent').html(response.value.joke);\n            $('.hiddenContent').show();\n            console.log('I show after I got the content');\n          }\n        });\n      });\n<\/script>\n<\/code><\/pre>\n
Check out Plunker<\/a><\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved jQuery add html content in hidden div [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] You can use jQuery’s hide() and show() function to accomplish this, which is a little cleaner than the .css() ZeJur used. Have a look at my Plunker example Example: <div class=”hiddenContent”>I am hidden div<\/div> <button class=”addDynamicContent”>Add dynamic content to div – hide while doing<\/button> Script: <script> $(‘.addDynamicContent’).click(function() { $.ajax({ url: “http:\/\/api.icndb.com\/jokes\/random”, beforeSend: function() { …