how to hide content in html?

This site is best viewed in a modern browser with JavaScript enabled.

fine0023

I have a website that is primarily used in K-12 schools. I have some social media buttons on it like Facebook 'like' and Pinterest 'pin it'. However, I'd like to have these buttons be hidden....where you have to click once on something (like an image that is covering them up but disappears when clicked....or a tab that just sort of scrolls away to reveal the buttons behind it). The reason for this is because these sites are usually blocked in schools (I realize there's probably nothing I can do about this) and these buttons look kind of ugly when they're blocked (it'll show a question mark or or something in place of the button in these cases). However, I do want the people who do not have them blocked to be able to access and see them easily.

I am in search of a simple solution to this where the buttons wouldn't be immediately visible until you click on something.

UAL225

Why make this complex? Keep it simple. Did you try simply to use a set logo for said websites (Facebook, Twitter, etc) and that way you can always have those buttons look "good/not ugly" and you dont need to "hide them" they wont be accessable since they are blocked but, you can have the logos that way. Unless you really want to hide them (Not sure if that is the case, please explain)

fine0023

Yes....I'd much rather not do anything complex or have to hide them, but how would I do this? For instance, when you go to get the facebook share code....it gives you something like this:

<div class="fb-like" data-href="http://www.mysite.com/" data-send="false" data-width="450" data-show-faces="false"></div>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=269568313060286";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

So how would I make it so that my own little facebook image appears? I don't see how I could insert my own image. Or maybe you meant something else?

UAL225

Try wrapping a <img> tag around your <script> tag. That should do the trick

fine0023

I still don't get it. An image tag is self closing....how would you wrap it around something?

Major_Payne

Might try these codes instead of FB's: Custom Buttons Mouseover the icons underneath the codes. Many let you use your own image(s).

There is no such thing as wrapping a script within an image tag. Check Facebook's Developer Pages for better codes that might allow customizing your image.

parkerfrank32

.hidden {
position: absolute;

left: -9999em;

top: auto;

width: 1px;

height: 1px;

overflow: hidden;

<div class="hidden">Hidden content here.</div>

NickJohnson

I think you keep it simple... User don't like complex things... They want simple.....