Not sure how to do this jQuery text changing

[Joveice]

So I'm creating this local password vault, and when you have gone thru the signin and decryption I want it to display the stuff, but the password is ******* until you press the title of it.

So here I want the "hide" to move to the ******* when <a>A title</a> is pressed and visa versa, tho I have no clue on how to do that.

I have a script that changes what it shows based on a <options> value and I were not able to re create it for this

<div class="col-lg-4">
                    <div class="ibox">
                        <div class="ibox-content text-center float-e-margins">
                            <a>A title</a>
                            <p class="form-control">*********</p>
                            <p class="form-control hide" id="copytext">Password</p>
                            <div class="text-center">
                                <button class="btn btn-xs btn-primary" data-clipboard-target="#copytext"><i class="fa fa-clipboard"></i> Copy </button>
                            </div>
                        </div>
                    </div>
                </div>

 

[Hazy125]

First of all... Anyone who just hits f12 would be able to see that password if I'm guessing how you want it to work correctly. Second, you probably want the jQuery toggle function. It would work something similar to this:

<p class="form-control">*********</p>
<p class="form-control hide" style="display:none;" id="copytext">Password</p>

<script>
$("a").click(function() {
  $("p").toggle();
});
</script>

 

Pretty rough way of doing it. Essentially whenever an a tag is clicked, it checks all the p tags for the display property. If the display is currently set to none then it shows the p tag. If the display isn't set to none, then it hides the p tag.

 

As the function suggests, it's a toggle. So clicking the a tag again will hide the password and bring back the ******** again.

 

You would need to improve on that to make it work for your application otherwise clicking any a tag will show all passwords on the page, not just the singular one

[Joveice]

2 minutes ago, Hazy125 said:

First of all... Anyone who just hits f12 would be able to see that password if I'm guessing how you want it to work correctly. Second, you probably want the jQuery toggle function. It would work something similar to this:

<p class="form-control">*********</p>
<p class="form-control hide" style="display:none;" id="copytext">Password</p>

<script>
$("a").click(function() {
  $("p").toggle();
});
</script>

 

Pretty rough way of doing it. Essentially whenever an a tag is clicked, it checks all the p tags for the display property. If the display is currently set to none then it shows the p tag. If the display isn't set to none, then it hides the p tag.

 

As the function suggests, it's a toggle. So clicking the a tag again will hide the password and bring back the ******** again.

 

You would need to improve on that to make it work for your application otherwise clicking any a tag will show all passwords on the page, not just the singular one

Well if they could press f12 and view the passwords / click the buttons security nr 1 has failed > don't give away your passwords. It's going to be local and not connected to the internet.

 

Well yea I guess it would work, but I have no idea on how jQuery works (same goes for normal java) so adding that function I have no clue on how to do.

I only know html, some php and little css

[Joveice]

Found this http://jsbin.com/ikijap/1/edit?html,css,js,output

But my attempt to add it to mine failed. I have a class named hide which sets display to none, and I tryed to make that script remove it when clicked and add it when clicked again.