I use this fancy little jQuery toggle on my site, works great. But now I have a little larger text area I want to hide, and therefore I've included it in another php file, but when the site opens\refreshes the content is briefly shown and then hidden? Have I done something wrong or does it simply not work right with includes in it ?

<a href="#" id="toggleMe">Show me?</a>
                <div class="content">
                    <?php include 'includes/test.php'?>
                     </div>
                     <script>
                         jQuery(document).ready(function() {
                         var par = jQuery('.content');
                            jQuery(par).hide();
                         });
                        jQuery('#toggleMe').click(function() { 
                        jQuery('.content').slideToggle('fast');
                     return false;
                     });
                     </script>

I use this fancy little jQuery toggle on my site, works great. But now I have a little larger text area I want to hide, and therefore I've included it in another php file, but when the site opens\refreshes the content is briefly shown and then hidden? Have I done something wrong or does it simply not work right with includes in it ?

<a href="#" id="toggleMe">Show me?</a>
                <div class="content">
                    <?php include 'includes/test.php'?>
                     </div>
                     <script>
                         jQuery(document).ready(function() {
                         var par = jQuery('.content');
                            jQuery(par).hide();
                         });
                        jQuery('#toggleMe').click(function() { 
                        jQuery('.content').slideToggle('fast');
                     return false;
                     });
                     </script>

• javascript
• php
• jquery

• Not sure about what you asked, but as an aside in your document ready handler you don't need the par variable, just jQuery('.content').hide();. (Or par.hide(); don't pass par to the jQuery() function again.) Also, if your script is after the element(s) it manipulates you don't need the document ready. – nnnnnn Commented Sep 14, 2013 at 20:45
• 1 Use CSS. .content{display:none} – j08691 Commented Sep 14, 2013 at 20:47
• You’re aware of what jQuery(document).ready does …? It waits until the whole document, including all external resources, has finished loading. But since you are embedding your script element after the element it is supposed to work on, you don’t need it – just jQuery('.content').hide() will do (supposed that jQuery is loaded already). – C3roe Commented Sep 14, 2013 at 20:47
• 3 @CBroe - That's not what document ready does. It doesn't wait for external resources like images to load, that's what the onload event does. Document ready just waits until the DOM is ready, i.e., the whole document has been parsed. – nnnnnn Commented Sep 14, 2013 at 20:48
• @CBroe You’re aware of what jQuery(document).ready does …? It waits until the DOM, but not all external resources, has finished loading. – Reinstate Monica Cellio Commented Sep 14, 2013 at 20:53

7 Answers 7

Use css to hide it

.content{
    display:none;
}

Also

var par = jQuery('.content');

is a jQuery object so don't need to wrap it again as

jQuery(par).hide();

Just use par.hide(); but in this case, when you will use css to hide the element, then you don't need this anymore.

That will happen. The document briefly shows all the HTML before executing the code in your ready handler. (It has nothing to do with the PHP include.) If you want an element hidden when the page loads, hide it using CSS.

#myElement {
    display: none;
}

The toggle should still work correctly.

You just need to don't use jquery document ready function. just use style attribute.

  <a href="#" id="toggleMe">Show me?</a>

  <div class="content" style="display:none">
        <?php include 'includes/test.php'?>
  </div>
                     <script>
                         jQuery(document).ready(function() {

                            jQuery('#toggleMe').click(function() { 
                            jQuery('.content').slideToggle('fast');
                            return false;
                         });
                     </script>

If this information is sensitive/not supposed to be seen without access granted, hiding it with CSS will not fix your problem. If it's not, you can ignore all of this and just use CSS with a display: none property.

If the information IS supposed to be hidden: You need to only load the file itself on-demand. You would request the data with AJAX, do a $('.content').html() or .append() and send the result back directly from the server to the browser using something like JSON.

You are using the "ready" function that meant it will hide the element when the document is ready (fully loaded). You can hide it using css:

.contnet { display: none; }

how you render you site server side does not affect how the site is loaded on the browser, what affects it is how the specific browser chooses to load your javascript and html, what i would remend is set the element to hidden with css, since that is applied before anything else. And keep you code as is, since the toggle will work anyways

You can also clean up the code a little bit.

   <script>
     $(document).ready(function(){
        $('.content').hide(); 
        $('#toggleMe').click(function(){ 
            $('.content').slideToggle('fast');
        });
     });
    </script>