Javascript: show/hide div on linked page

[paulclift 0]

I am displaying data from one page in another page in the following way:

<script>
    $(document).ready(function(){  
        $( "#2017" ).load( "data.html .2017" );
        $( "#2016" ).load( "data.html .2016" );
    });
</script>   

    <div id="2017"></div>
    <div id="2016"></div>

...BUT I also need to be able to hide (onload) certain div classes from within the linked file... 

<script>
    $(document).ready(function(){
        $('.private-files').hide();
    }); 
</script>   

I know that the code above will hide divs by class if they are contained in the main page, but how can I make it so that divs of class 'private-files' in 'data.html' will also be hidden?

[justsomeguy 1,135]

You need to run the code to hide the elements after adding them to the page.  Hopefully that load method has a callback function you can use for that.

[paulclift 0]

@justsomeguy Thanks for your response. I am not particularly knowledgable with JS .... could you describe your solution in a little more detail please?

[justsomeguy 1,135]

The documentation for jQuery's load method is here:

http://api.jquery.com/load/

You can see from some of the examples that you can pass a callback function to load also.  The callback function gets called after the load has finished.  Inside that callback function you can run the code to hide the new elements that were just added.