CODEWITHSUNDEEP
javascriptphpjquery
Thomas Nielsen
Thomas Nielsen

Reputation: 613

jQuery shows hidden content on refresh

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>

Upvotes: 1

Views: 3538

Answers (7)

knard
knard

Reputation: 43

You can also clean up the code a little bit. 

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

Upvotes: 0

user2625787
user2625787

Reputation:

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.

Upvotes: 2

Deryck
Deryck

Reputation: 7668

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.

Upvotes: 1

The Alpha
The Alpha

Reputation: 146219

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.

Upvotes: 4

Breezer
Breezer

Reputation: 10490

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 recommend 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

Upvotes: 0

Asaf
Asaf

Reputation: 557

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; }

Upvotes: 0

dev.meghraj
dev.meghraj

Reputation: 9120

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>

Upvotes: 1

Related Questions