Home/ Questions/Q 7488821
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T15:02:59+00:00

is there a simple way to reveal text within a webpage using a link

  • 0

is there a simple way to reveal text within a webpage using a link without altering the web address or using an iframe? maybe with an ‘onclick’ function? im pretty new to new code so not sure where to start.. ive attached a picture of what exaclty im after, fairly simple. im already using an iframe as the main interface so another one would get messy in terms of a default menu. there must be a simple fix.. any help would be really appreciated.
thanks, Aaron

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Put the text you want to hide until click inside hidden container, like this:

    <div id="HiddenTextContainer" style="display: none;">
   Hello, I will become visible when you click something else
</div>

    Next step is add that JavaScript code to the page, for example inside the <head> section:

    function ShowHiddenText() {
    document.getElementById("HiddenTextContainer").style.display = "block";
}

    And finally have such code:

    <span onclick="ShowHiddenText();">click me to show hidden text</span>

    Live test case.

    Edit: in case you got more than one element to show, you can use the rel attribute:

    <span rel="HiddenTextContainer2">click me to show second hidden text</span><br />

    Then with pure JavaScript iterate over all elements with that attribute and assign their onclick programmatically:

    window.onload = function() {
    var elements = document.getElementsByTagName("span");
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        var id = element.getAttribute("rel") || "";
        if (id.length > 0) {
            element.onclick = function() {
                var oToShow = document.getElementById(this.getAttribute("rel"));
                if (oToShow)
                    oToShow.style.display = "block";
            };
        }
    }
};

    When clicked, element with ID the same as the rel value will be displayed.

    Updated fiddle.

    Edit: to show it in one single container, first have such container:

    <div id="HiddenTextContainer"></div>

    No need to have it hidden since it’s initially empty, then change the code to:

    window.onload = function() {
    var elements = document.getElementsByTagName("span");
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        var id = element.getAttribute("rel") || "";
        if (id.length > 0) {
            element.onclick = function() {
                var oToShow = document.getElementById(this.getAttribute("rel"));
                if (oToShow)
                    document.getElementById("HiddenTextContainer").innerHTML = oToShow.innerHTML;
            };
        }
    }
};

    Instead of showing the related container, you copy its contents to the “main” container.

    Updated jsFiddle.

    • 0