CODEWITHSUNDEEP
javascriptjqueryhtml
Hello Lili
Hello Lili

Reputation: 1587

Show link which is inside a hidden div

Let's say I have this inner link which is positioned inside a hidden div (display:none) - the div toggles when a button is clicked:

<a name="here">Show me!</a>

How can I make the element visible when somebody enters the url: mypageurl#here, without clicking the toggle button (make it visible by default when this specific link is entered)?

Upvotes: 0

Views: 123

Answers (4)

Ahs N
Ahs N

Reputation: 8366

Here is the source code of a simple page that I made:

<html>
<script src="http://code.jquery.com/jquery-latest.min.js "></script>
<body>
<div id="hide" style="display:none">
    <a name="here">Show me!</a>
</div>
</body>

<script>
    $(document).ready(function(){
        if(document.location.href.search("#hide")>0){
            $("#hide").toggle();
        }
    });
</script>
</html>

It will show the div with the id hide if the page has the text "#hide", else it remains hidden.

Upvotes: 1

inquizitive
inquizitive

Reputation: 632

You can use the below script.

<script>
$(document).ready(function(){
    var loc = document.location.hash;
    if(loc == "#test")
    {
        $('#test').show();
    }
});
</script>

Upvotes: 1

Sky Fang
Sky Fang

Reputation: 1101

$().ready(function () {
    var hash = $.trim(window.location.hash);
    if (hash != '') {
        var prt = $('[name="' + hash.substr(1) + '"]').parent();
        prt.show();
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:none;"><a name="here">Show me!</a></div>

Full code!

Upvotes: 1

Lansana Camara
Lansana Camara

Reputation: 9873

You could use the CSS "visibility:hidden", then use JavaScript to change that to "visibility:visible" when someone enters a certain phrase.

Alternatively, you could just use display: ""; or display:block on the "display:none" div when the same action occurs, again using some JavaScript.

Upvotes: 1

Related Questions