Home/ Questions/Q 8269471
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T06:14:12+00:00

<body> <span id=lock>lock</span> <div id=one>test test</div> <div id=three style=display: none>hide</div> <span id=two>test</span> <div id=div_lock>

  • 0
<body>
    <span id="lock">lock</span>
    <div id="one">test test</div>
    <div id="three" style="display: none">hide</div>
    <span id="two">test</span>
    <div id="div_lock">
        Enter password: <input type="password"> <input type="button" value="unlock" id="unlock">
    </div>
</body>

$('#lock').click(function(){
  $('#div_lock').show();
    //????
})

$('#unlock').click(function(){
  $('#div_lock').hide();
//????
})

if i click LOCK then i would like open div_lock and hide all other elements in page. And if i click unlock then hide div_lock and show previous elements.

Can i use other function than .hide? If i use hide then is possible to check SOURCE code. Maybe any variables with SIMPLE hash etc?
If not how can i make this with .hide() and show()? I can use also PHP and Ajax

View the jsfiddle here.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The simplest solution is:

    $('#lock').click(function() {
    $(this).siblings().andSelf().fadeOut();
    $('#div_lock').fadeIn();
})

$('#unlock').click(function() {
    $('#div_lock').fadeOut();
    $(this).closest('div').siblings().fadeIn();
})​

    (Though note I’m using fadeIn() and fadeOut() rather than the ‘more-sudden’ show() and hide())

    JS Fiddle demo.

    It’s also worth remembering that if anyone has access to your browser (assuming this is some kind of security feature) they can still override this via the JavaScript console, or by simply refreshing the page (assuming no log-in).

    Updated in response to comment left by OP (below):

    this is ok, but if i click unlock then this show me also <div id="three" style="display: none">hide</div> – this should me still display:none

    The problem you have is that all the affected elements are of style="display: none;" once the jQuery’s hidden them (that’s how it works, after all); so I’d suggest a tidier approach, and compartmentalising the content and the controls, to something resembling the following:

    <div id="controls">
    <button id="lock">Lock screen</button>
    <input type="password" />
    <button id="unlock">Unlock screen</button>
</div>
<div id="content">
    <!-- all content goes in here -->
</div>​

    Which lends itself to the following jQuery (which stores the nodes to hide/show as they are, and then restores them as required):

    var content = $('#content'),
    contents;
$('#controls').children().slice(1).hide();
$('#lock').click(function() {
    contents = content.html();
    content.empty();
    $(this).hide().siblings().show();
});

$('#unlock').click(function() {
    content.html(contents);
    $(this).closest('div').children().hide().first().show();
});​

    JS Fiddle demo.

    • 0