Show/Hide Information by clicking

Question

I have Values in my application that precision a certain privacy, the code works well, I would just like to know how to hide the "**" when show the values.

$(function() {
  $(".btn-toggle").click(function(e) {
    e.preventDefault();
    el = $(this).data('element');
    $(el).toggle();
  });
});

<div id="minhaDiv" style="display:none">
  <h6 class="mb-0 font-weight-bold">
    Valor
  </h6>
</div>

<p class="btn-toggle" data-element="#minhaDiv">***</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

I made a change to your code that will hide the *** and return to it by clicking on the value.
The change was to add the class btn-toggle also in the div of the value and add the data-element referencing to div of ***.
In the function I added the $(this).toggle(); to perform toggle also on the element clicked.

$(function() {
  $(".btn-toggle").click(function(e) {
    e.preventDefault();
    el = $(this).data('element');
    $(this).toggle(); // vai fazer o toggle no elemento clicado
    $(el).toggle(); // vai fazer o toggle no elemento que é data do elemento clicado
  });
});

<div id="minhaDiv" style="display:none" data-element="#divSecreta" class="btn-toggle">
  <h6 class="mb-0 font-weight-bold">
    Valor
  </h6>
</div>

<div class="btn-toggle" id="divSecreta" data-element="#minhaDiv">***</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Taking @Lucas Ayrosa’s response as the basis, I refactored and simplified the code.

You can use the attribute data-element and carry out toggle in both elements.

$("[data-element]").click(function(e) {
    $('[data-element]').toggle(); // vai fazer o toggle nos elementos
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="minhaDiv" style="display:none" data-element="#divSecreta">
    <h6 class="mb-0 font-weight-bold">
        Valor
    </h6>
</div>

<div class="btn-toggle" data-element="#minhaDiv">***</div>

---

Reference: Toggle

Answer 3

If you just want to toggle text and asterisks, there is no reason why you have a div separate, or any very complex structure...

You could simply save the original text in an attribute and toggle the HTML of the element.

Take an example:

$('.hidden-text')
    // Começa os textos com ****
    .html(function(i, old_text) {
      return "*".repeat(this.dataset.text.length);
    })
    // Alerna os texto
    .on('click', function() {
        let text = this.dataset.text;
        
        if (this.is_visible) {
            this.innerHTML = "*".repeat(text.length);
        } else {
            this.innerHTML = text;
        }
        
        this.is_visible = !this.is_visible;
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="hidden-text" data-text="Meu texto escondido"></p>
<p class="hidden-text" data-text="outro texto escondido"></p>

---

The operation is simple:

1. Use the method .html to "initialize" all elements with asterisks;

2. By clicking on the element I check if the property is_visible is true

   • If yes, I hide the text by replacing its contents with asterisks (I am using the method String.repeat() to repeat the asterisk N times);
   • If not, I show the text replacing its contents with the text contained in data-text (see more about data-* in documentation);

Note that the property is_visible does not exist, I "invented" to keep the state of that object in memory without having to access the DOM.

Answer 4

You can do it this way using the .one() that triggers the click event only 1 time. Even works for multiple elements:

$(function() {
   $(".btn-toggle").click(function(){
      var data = $(this).data('element'); // pega o data-element
      var div = $(data); // pega a div com id igual ao data-element
      $(this).hide(); // esconde o ***
      div
      .show() // mostra a div do valor
      .one("click", function(){
         $(this).hide(); // esconde a div do valor
         $("[data-element='"+data+"']").show(); // mostra o ***
      });
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="minhaDiv" style="display:none">
  <h6 class="mb-0 font-weight-bold">
    Valor
  </h6>
</div>

<p class="btn-toggle" data-element="#minhaDiv">***</p>

<div id="minhaDiv2" style="display:none">
  <h6 class="mb-0 font-weight-bold">
    Valor2
  </h6>
</div>

<p class="btn-toggle" data-element="#minhaDiv2">***</p>