...

View Full Version : how to hide content in html?



fine0023
11-19-2012, 04:22 PM
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 not looking to do anything fancy, but am just in search of a simple solution to this where the buttons wouldn't be immediately visible until you click on something.

VIPStephan
11-19-2012, 04:36 PM
Since these buttons are basically generated with JavaScript it’s JavaScript, too, that would provide such functionality. One way – that doesn’t make the buttons invisible but adds an image you have to click before activating the button(s) – is jQuery’s Social Share Privacy (https://github.com/patrickheck/socialshareprivacy) plugin. Plus, it enhances privacy (as the name implies) because these social buttons aren’t storing any cookies initially, because they aren’t active unless you activate them.

bparker1084
11-20-2012, 06:02 AM
Put the content that you want to SHOW/HIDE in a <div> ..... </div> tag and control HIDE/SHOW of the <div> element via JavaScript.

fine0023
11-20-2012, 06:07 PM
Put the content that you want to SHOW/HIDE in a <div> ..... </div> tag and control HIDE/SHOW of the <div> element via JavaScript.

Can you please elaborate on this a little bit? I don't quite understand how this would work or what the effect of this would be (don't know much about javascript).

Philip M
11-21-2012, 09:16 AM
Can you please elaborate on this a little bit? I don't quite understand how this would work or what the effect of this would be (don't know much about javascript).


Simple example:-



<div id = "myDiv" style="visibility:hidden">
CONTENT OF YOUR DIV - BUTTONS OR WHATEVER
</div>
<br><br>
<input type = "button" value = "Click here to reveal content" onclick = "showdiv()">

<script type = "text/javascript">
function showdiv() {
document.getElementById("myDiv").style.visibility="visible";
}

</script>

If you prefer an image then replace
<input type = "button" value = "Click here to reveal content" onclick = "showdiv()">
by
<img src = "myimage.gif" onclick = "showdiv()">

Old Pedant
11-22-2012, 02:55 AM
Note that if you use visiblity: hidden then the buttons or images or whatever will *STILL* occupy the same space on the screen as they would if they were visible.

If that's not desirable, use display: none; instead.



<div id = "myDiv" style="display: none;">
CONTENT OF YOUR DIV - BUTTONS OR WHATEVER
</div>
<br><br>
<input type = "button" value = "Click here to reveal content" onclick = "showdiv()">

<script type = "text/javascript">
function showdiv() {
document.getElementById("myDiv").style.display = "block";
}
</script>


Now the invisible items won't occupy any space until you change the style.display to block.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum