CODEWITHSUNDEEP
html
Andy
Andy

Reputation: 875

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 in search of a simple solution to this where the buttons wouldn't be immediately visible until you click on something.

Upvotes: 2

Views: 25506

Answers (2)

Andy
Andy

Reputation: 875

Thanks for your help! I tried this and it works well. I think it was a pretty simple solution (even though I don't know javascript) and accomplished just what I wanted to do, which was to basically hide those buttons until an image that is covering them is clicked. Just for the record, here's the exact code I used:

<script type="text/javascript">
    function showElement(){
        var myElement = document.getElementById('elementId');
    myElement.style.display = '';
    hideImage();
    }

    function hideImage(){
    var myElement = document.getElementById('imageId');
    myElement.style.display = 'none';
    }
</script>

(All I changed was adding the missing quotation mark on the first line and took out that one line about referencing to the element since I assume that is something optional.) For the html part, here's exactly what I did:

<div>
<img id="imageId" src="/images/cover.jpg" alt="cover" onclick="showElement()" width="185" height="124" />
<div id="elementId" style="display:none">
(hidden content went here)
</div>
</div>

(I didn't change much on this part either other than closing the image tag, putting in the dimensions for the image, etc.) Hopefully, I didn't do any of this wrong, but it seems to work as intended. The only other thing that would be a nice touch would be if there was a way to make it have the 'hand with pointing finger' symbol appear when you hover over it....in order to make it clear that it is a clickable image, but if not, it's not essential.

Upvotes: 0

LittleSweetSeas
LittleSweetSeas

Reputation: 7054

If you're using JQuery or any other support library, you would have plenty of way to achieve your goal, even with a lot of visual effects.

Anyway, the simplest way to achieve it is by playing with the "display" attribute of the element.

Add this in your html head tag:

<script type="text/javascript>

    function showElement(){
       // get a reference to your element, or it's container
       var myElement = document.getElementById('elementId');
       myElement.style.display = '';
       hideImage();
    }

    function hideImage(){
       var myElement = document.getElementById('imageId');
       myElement.style.display = 'none';
    }

</script>

Now add a click event on the element you want to use to show your hidden content:

<img id="imageId" onclick="showElement()" src="..."/>

If you want to hide your "hidden" element by default, add a inline style:

<div id="elementId" style="display:none">...your buttons here...</div>

Obviously, there are a lot of better ways to achieve it (eg. changing css classes), but I think you would be able to work with the above instructions.

Edited to improve the answer:

Create an HTML structure like the following:

<div>
   <img id="imageId" alt="" src="..." onclick="showElement()">
   <div id="elementId" style="display:none">
      <!-- your buttons, anchors or anything else you want to be hidden by default-->
   </div>
</div>

So, when you click the image, the buttons appear and the image disappear.

Upvotes: 2

Related Questions