how to hide the google +1 button?

I have a google +1 button in a div which is supposed to be initially hidden and should change visibility on a click event. Everything else in the div works fine but for some reason the button won't inherit the div rules and it stays permanently visible:

<div id="sharethisdish"> 
    ...
        <g:plusone size="small" count="false" ></g:plus开发者_JAVA百科one>
</div>

I've tried giving the button its own styling in the html as well as giving it an id and defining the styling in my css page but it doesn't seem to follow any rules. Does anyone know how to change its visibility?

If the hiding/showing is being done onClick then chances are that it is applying the style inline. Which means the inline style will override the one set in your css file.

You could use !important and I believe that should override the style being applied on click.

This should solve your problem:

HTML:

<div id="sharethisdish">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall" callback="g_click_function"></g:plusone>

JS:

var d = document.getElementById("sharethisdish");
d.style.display = "none";

Now make onclick event that would make d.style.display = "inline";