CODEWITHSUNDEEP
javascriptjqueryhtml
Errol Chaves Moya
Errol Chaves Moya

Reputation: 377

Hide&Show Fieldset on Javascript using a button doesn't work on first click / How to change button title on click

I am trying to hide/sow a fieldset using a button, which works like a charm. However it doesn't wonk when I click the first time, but from the second time on it keeps working ok.

How can I make work the first time I click the button.

Also I'd ike to change the button's title on click too, but I don't know how.

Thanks in advance!

This is the code I have:

$(document).ready(function() {
  $('#OcultarEncabezadoFactura').click(function() {
    var fieldset = document.getElementById("fsEncabezado");
    var boton = document.getElementById("OcultarEncabezadoFactura");

    if (boton.textContent== "Ocultar Encabezado") {
      $('#fsEncabezado').hide();
      boton.textContent= "Mostrar Encabezado";
      //title I would like the button to have when fieldset is hidden

    } else {
      $('#fsEncabezado').show();
      boton.textContent= "Ocultar Encabezado";
      //title I would like the button to have when fieldset is shown

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

<button type="button" name="btnOcultarEncabezadoFactura" class="btn btn-xs btn-primary" id="OcultarEncabezadoFactura" data-row-id="0">Ocultar Encabezado</button>

<fieldset id="fsEncabezado"></fieldset>

Upvotes: 0

Views: 48

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65845

A button element doesn't have a title property so your test was failing. You need to check the button's textContent.

Also, don't use HTML comment syntax (<!-- comment -->) inside of <script> tags. To comment in JavaScript, it's: // comment here.

$(document).ready(function(){
    $('#OcultarEncabezadoFactura').click (function(){
        var fieldset = document.getElementById("fsEncabezado");
        var boton= document.getElementById("OcultarEncabezadoFactura");

    if(boton.textContent =="Ocultar Encabezado"){
        fieldset.classList.add('hide');
        boton.textContent ="Mostrar Encabezado"; 
    } else {
        fieldset.classList.remove('hide');
        boton.textContent="Ocultar Encabezado"; 
    }
  });
});
.hide { display:none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" name="btnOcultarEncabezadoFactura" class="btn btn-xs btn-primary" id="OcultarEncabezadoFactura" data-row-id="0">Ocultar Encabezado</button>
<fieldset id="fsEncabezado"></fieldset>

But, if your goal is to have a button that simply toggles the visibility of the fieldset, just use the element.classList.toggle() API:

$(document).ready(function(){
  var fieldset = document.getElementById("fsEncabezado");
  $('#OcultarEncabezadoFactura').click (function(){
      fieldset.classList.toggle("hide");  
  });
});
.hide { display:none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" name="btnOcultarEncabezadoFactura" class="btn btn-xs btn-primary" id="OcultarEncabezadoFactura" data-row-id="0">Ocultar Encabezado</button>
<fieldset id="fsEncabezado"></fieldset>

Upvotes: 1

MichaelvE
MichaelvE

Reputation: 2578

You should use innerHTML to change the text on your button, not title. 

$(document).ready(function() {
  $('#OcultarEncabezadoFactura').click(function() {
    var fieldset = document.getElementById("fsEncabezado");
    var boton = document.getElementById("OcultarEncabezadoFactura");

    if (boton.innerHTML == "Ocultar Encabezado") {
      fieldset.classList.add('hide');
      boton.innerHTML = "Mostrar Encabezado";
      <!-- title I would like the button to have when fieldset is hidden-->

    } else {
      fieldset.classList.remove('hide');
      boton.innerHTML = "Ocultar Encabezado";
      <!-- title I would like the button to have when fieldset is shown-->

    }
  });
});
.hide {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" name="btnOcultarEncabezadoFactura" class="btn btn-xs btn-primary" id="OcultarEncabezadoFactura" data-row-id="0">Ocultar Encabezado</button>

<fieldset id="fsEncabezado">
  <input type="text" />
</fieldset>

Upvotes: 0

Related Questions