Show a hidden text

user_18263218 0
Viewed 152

I am completely new to scripts and i would like to have hidden elements in my text, that will be displayed when cliking on a show.png

I found that script which is simple, and I want it to make the contrary : show hidden text instead of hide a visible text:

<div class="hide1">One</div>
<div class="hide2">Two</div>

<a href="#" onclick="ToggleVisibility('hide1'); return false;">One</a>
<a href="#" onclick="ToggleVisibility('hide2'); return false;">Two</a>
<a href="#" onclick="ToggleVisibility('nosuchclass'); return false;">No hide</a>

< -------------------------------------------------------->

    function ToggleVisibility(divClass)
{
    var els = document.getElementsByClassName(divClass);
    for(var i = 0; i < els.length; i++)
    {
        els[i].style.visibility = els[i].style.visibility == "hidden" ? "visible" : "hidden";
    }
}

As I don't even know how to call it, i have problems finding the solution on the web

Thank you for your help

script visible hidden show hide
2 Answers

  • el.style.visibility = "hidden" will make your element hidden.

  • el.style.visibility = "visible" will make your element visible.

  • els[i].style.visibility == "hidden" ? "visible" : "hidden" will make your element visible if it is hidden, and hidden if it is visible.

If you want to make an image clickable, add the onclick attribute:

<img src='show.png' onclick="ToggleVisibility('divClass')>

ToggleVisibility('divClass') is your function that you have to call. divClass corresponds to every element that has this class. E.g. :

<div class="hide1">One</div>
<img class='hide1' src='show.png' onclick="ToggleVisibility('hide1')">
<a href="#" onclick="ToggleVisibility('hide1')"; return false;">One</a>

<script>
function ToggleVisibility(divClass)
{
    var els = document.getElementsByClassName(divClass);
    for(var i = 0; i < els.length; i++)
    {
        els[i].style.visibility = els[i].style.visibility == "hidden" ? "visible" : "hidden";
    }
}
</script>

As you can see, both elements have the 'hide1' class. Both will be hidden/shown when the function is called. In your case, you could change it so that it only shows and stays shown when you press again.

<div class="hide1">One</div>
<img class='hide1' src='show.png' onclick="ToggleVisibility('hide1')">
<a href="#" onclick="ToggleVisibility('hide1')"; return false;">One</a>

<script>
function ToggleVisibility(divClass)
{
    var els = document.getElementsByClassName(divClass);
    for(var i = 0; i < els.length; i++)
    {
        els[i].style.visibility = 'visible'; // <-- here
    }
}
</script>

You can also make the element hidden directly in the HTML : <p style='visibility:hidden' class='hide1'>Hidden characters</p> so that when your page load, the characters are hidden. You can then dynamically change the visibility using javascript like your ToggleVisibility(divClass) function.

user_180610420

Thank you for your answer Battalarion :)

I tried what you explained but i dont get it. And I don't want the pluss.png to disappear.

Where do i have to put el.style.visibility = "hidden" ?

Here what i have so far (it works fine but I just want to reverse the function cause the answer isn't hidden and cliking on the + hides it:

<p><strong>Select the correct character(s) for “さん”</strong> <a href="#" onclick="ToggleVisibility('hide1'); return false;"><img src="pluss.png" title="show"></a>
<p>①五　②三　③二　④一</p>
<div class="hide1"> 三</div>

< ------------------------------------------>

    <script>
    function ToggleVisibility(divClass)
    {
        var els = document.getElementsByClassName(divClass);
        for(var i = 0; i < els.length; i++)
        {
            els[i].style.visibility = els[i].style.visibility == "hidden" ? "visible" : "hidden";
        }
    }
    </script>

And the result: (the + is the image) On my page the last character should't be visible, but it is. So I just want to reverse the function

Select the correct character(s) for “さん” +

①五　②三　③二　④一

三
user_182632180
Related