Jquery Hide Show Does Not Seem To Be Working Correclty

Question

Let's say I have a div like this:

<div class="box-body">
   <a href="#" id="hideshow">Hide</a></br>
   <div id="message">
      <p>password: <input type="password" name="blog_pass"></p>
    </div>
</div>

Basically what I want to do is to hide the div message when I click on the hideshow link and show it again when I click on this link again.

So I added a script at the end of my page in order to do this:

$('#hideshow').toggle(function(){
    $('#hideshow').text('Show');
    $('#message').hide();
}, function(){
    $('#hideshow').text('Hide');
    $('#message').show();
});

But now the problem is it does not even work out. I mean no error appears on console and even the link Hide is not showing somehow.

So what is your idea about this... How can I fix this?

[Docs](http://api.jquery.com/toggle/). You don't need to use this: $('#message').hide(); so remove hide and show function. — Sfili_81, Jun 18 '18 at 11:32
You're wrong. You should use like : `toggle(duration, function) ` — AA Shakil, Jun 18 '18 at 11:35

Ankit Agarwal · Accepted Answer · 2018-06-18T11:34:46.257

0

You can use a class say, hidePwd to toggle it for hide/show operation:

$('#hideshow').click(function(){
    var newText = $('#hideshow').text().trim() === 'Hide'? 'Show':'Hide';
    $('#hideshow').text(newText);
    $('#message').toggle('hidePwd');
});

.hidePwd{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
   <a href="#" id="hideshow">Hide</a><br>
   <div id="message">
      <p>password: <input type="password" name="blog_pass"></p>
    </div>
</div>

edited Jun 18 '18 at 11:34

answered Jun 18 '18 at 11:32

Ankit Agarwal

30,378
5
37
62

1

Another duplicate – Satpal Jun 18 '18 at 11:34
@satpal feel free to vote to close as dup – Ankit Agarwal Jun 18 '18 at 11:38

Jquery Hide Show Does Not Seem To Be Working Correclty

1 Answers1