I have a problem, and try it to solve two more days. Try do it like this:

$.when( $(document).ready ).then(function func_fold () {
  $( "#collapsible_sidebar" ).addClass('folded');    
})

And like this:

$(document).ready(function func_fold () {
  $( "#collapsible_sidebar" ).addClass('folded');    
})

And like this too:

$(document).ready(function() {
  $( "#collapsible_sidebar" ).addClass('folded');    
})

Try .hide() to see work selector at all, and it doesn't work too. But when I open DOM, I can see this element and this ID.

Warning! I think it important, this div is added to DOM by AJAX.

HTML element:

<div id="collapsible_sidebar"><?php dynamic_sidebar( 'sidebar-1' ); ?></div>

I have a problem, and try it to solve two more days. Try do it like this:

$.when( $(document).ready ).then(function func_fold () {
  $( "#collapsible_sidebar" ).addClass('folded');    
})

And like this:

$(document).ready(function func_fold () {
  $( "#collapsible_sidebar" ).addClass('folded');    
})

And like this too:

$(document).ready(function() {
  $( "#collapsible_sidebar" ).addClass('folded');    
})

Try .hide() to see work selector at all, and it doesn't work too. But when I open DOM, I can see this element and this ID.

Warning! I think it important, this div is added to DOM by AJAX.

HTML element:

<div id="collapsible_sidebar"><?php dynamic_sidebar( 'sidebar-1' ); ?></div>

• javascript
• jquery

• Can you explain what's not working? The last one you have there works. – jerrylow Commented Mar 8, 2019 at 17:17
• 1 Add relevant HTML and convert it into a snippet. Then we can see what you are trying to say. – PM 77-1 Commented Mar 8, 2019 at 17:17
• Yeah the element doesn't exist when document.ready triggers, so you'll need to add this class once the element does exist. – James Commented Mar 8, 2019 at 17:17
• <div id="collapsible_sidebar"><?php dynamic_sidebar( 'sidebar-1' ); ?></div> – Georgy Potapov Commented Mar 8, 2019 at 17:27
• Possible duplicate of Why does jQuery or a DOM method such as getElementById not find the element? – Taplar Commented Mar 8, 2019 at 17:28

1 Answer 1

If it's being added to the DOM by AJAX, that means it's being added sometime after $(document).ready(). AJAX stands for "Asynchronous Javascript And XML", asynchronous meaning that it will execute on its own time when the server can get to it. If you want to execute that class being added, you need to put $("#collapsible_sidebar").addClass('folded'); into the success function in your AJAX call.

$.ajax({
    //other parameters
    success: function () {
        $("#collapsible_sidebar").addClass('folded');
    }
});