Make google +1 button hidden like parent div

I have a modal box div, that has visibility: hidden; and after 5s it shows up thanks to a javascript function. Inside that div, I have code for google plus one button, but the thing is that before the modal box pops up, the button is already visible. I want it to appear at the same time as the modal box (5s after the page loads, not instantly). Is there any way to do that?

<script type="text/javascript" src=""></script>
<g:plusone size="tall" callback="g_click_function"></g:plusone>
    function g_click_function(){

  • Javascript equivalent for jquery width()
  • How to Add class to all images inside div using jQuery?
  • animate between css states?
  • Firefox doesn't render SVG properly, other browsers do
  • Overflow scroll on y axis with fixed height
  • How to disable all inline styling with JavaScript?
  • how to focus the scroll based on the current selection class
  • How can I set a css “:hover” on a DOM created element in JavaScript?
  • jQuery “bounce” effect on center-aligned block elements aligns them left in Firefox and IE8
  • remove background-image from style
  • How to focus a <tr> or <td> tag using jQuery or JavaScript?
  • Font-Awesome icon preventing click in parent button
  • One Solution collect form web for “Make google +1 button hidden like parent div”

    First, add an id to the <script> tag, such as mygone:

    <script id="mygone" type="text/javascript" src=""></script>

    Then, if you’re using jQuery (or onload for the body) hide it when the page loads:


    Finally, when you’re ready to show it, run this code:


    I also created an example in JSFiddle for you here: