Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to hide content in html?

    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.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,918
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    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 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.

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Location
    San Jose
    Posts
    9
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Put the content that you want to SHOW/HIDE in a <div> ..... </div> tag and control HIDE/SHOW of the <div> element via JavaScript.

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,303
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    Quote Originally Posted by fine0023 View Post
    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:-


    Code:
    <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()">
    Last edited by Philip M; 11-21-2012 at 09:19 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    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.

    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •