I want to create a script which locks and unlock 2 buttons. If the divs are shown then lock the button "Tout déplier" and unlock the button "Tout plier", but if the divs are hidden then lock the button "tout plier" and unlock the button "Tout deplier".

My code, the buttons :

<input  type="button" name="answer" class="Button"  value="Tout plier" onclick="hideDiv()" /> 
<input  type="button" name="answer" class="Button" value="Tout déplier" onclick="showDiv()" /> 

The javascript for show and hide the divs :

function showDiv() {
   document.getElementById('content_caract_1').style.display = "block";
   document.getElementById('content_caract_2').style.display = "block";
   document.getElementById('content_caract_3').style.display = "block";
   document.getElementById('content_caract_4').style.display = "block";
}

function hideDiv() {
   document.getElementById('content_caract_1').style.display = "none";
   document.getElementById('content_caract_2').style.display = "none";
   document.getElementById('content_caract_3').style.display = "none";
   document.getElementById('content_caract_4').style.display = "none";
}

I want to create a script which locks and unlock 2 buttons. If the divs are shown then lock the button "Tout déplier" and unlock the button "Tout plier", but if the divs are hidden then lock the button "tout plier" and unlock the button "Tout deplier".

My code, the buttons :

<input  type="button" name="answer" class="Button"  value="Tout plier" onclick="hideDiv()" /> 
<input  type="button" name="answer" class="Button" value="Tout déplier" onclick="showDiv()" /> 

The javascript for show and hide the divs :

function showDiv() {
   document.getElementById('content_caract_1').style.display = "block";
   document.getElementById('content_caract_2').style.display = "block";
   document.getElementById('content_caract_3').style.display = "block";
   document.getElementById('content_caract_4').style.display = "block";
}

function hideDiv() {
   document.getElementById('content_caract_1').style.display = "none";
   document.getElementById('content_caract_2').style.display = "none";
   document.getElementById('content_caract_3').style.display = "none";
   document.getElementById('content_caract_4').style.display = "none";
}

• javascript
• html

• 2 Using classes would be more appropriate than having indexed IDs. – CertainPerformance Commented Oct 2, 2018 at 8:16
• 1 And even the code is not plete! Where is div related code? – Prashant Pimpale Commented Oct 2, 2018 at 8:25

4 Answers 4

By lock and unlock I am assuming disabling and enabling button. If I am correct please try code below this might help.

function showDiv($this) {
            enableAllButtons();
            $this.disabled = true;
   document.getElementById('content_caract_1').style.display = "block";
   document.getElementById('content_caract_2').style.display = "block";
   document.getElementById('content_caract_3').style.display = "block";
   document.getElementById('content_caract_4').style.display = "block";
   }
    function hideDiv($this) {
        enableAllButtons();
            $this.disabled = true;
   document.getElementById('content_caract_1').style.display = "none";
   document.getElementById('content_caract_2').style.display = "none";
   document.getElementById('content_caract_3').style.display = "none";
   document.getElementById('content_caract_4').style.display = "none";
  }
  function enableAllButtons(){
      var buttons = document.getElementsByName('answer');
      for(i=0; i<buttons.length; i++)
      {
          var tempButton = buttons[i];
          tempButton.disabled = false;
      }
  }

     <input  type="button" name="answer" class="Button"  value="Tout plier" onclick="hideDiv(this)" /> 
<input  type="button" name="answer" class="Button" value="Tout déplier" onclick="showDiv(this)" /> 

set the disabled property of the buttons accordingly.

function showDiv() {
   document.getElementById('content_caract_1').style.display = "block";
   document.getElementById('content_caract_2').style.display = "block";
   document.getElementById('content_caract_3').style.display = "block";
   document.getElementById('content_caract_4').style.display = "block";
   document.getElementById('btnShow').disabled = true;
   document.getElementById('btnHide').disabled = false;
}
function hideDiv() {
   document.getElementById('content_caract_1').style.display = "none";
   document.getElementById('content_caract_2').style.display = "none";
   document.getElementById('content_caract_3').style.display = "none";
   document.getElementById('content_caract_4').style.display = "none";
   document.getElementById('btnShow').disabled = false;
   document.getElementById('btnHide').disabled = true;
}

<input id="btnHide" type="button" name="answer" class="Button"  value="Tout plier" onclick="hideDiv()" /> 
<input id="btnShow" type="button" name="answer" class="Button" value="Tout déplier" onclick="showDiv()" disabled="true"/>
<div id="content_caract_1">content_caract_1</div>
<div id="content_caract_2">content_caract_2</div>
<div id="content_caract_3">content_caract_3</div>
<div id="content_caract_4">content_caract_4</div>

First of all, it will be better to avoid the use of inline-event onclick and attach the click event in your JS part instead using addEventListener().

Give your buttons an identifier and give your divs a mon class instead if incremented ids (that will simplify the selectors for you), then use a mon function that toggle the display like :

var show_btn = document.querySelector('#show-div-btn');
var hide_btn = document.querySelector('#hide-div-btn');

show_btn.addEventListener('click', toggleDisplay);
hide_btn.addEventListener('click', toggleDisplay);

function toggleDisplay() {
  var display = this.id == 'show-div-btn' ? 'block' : 'none';
  var divs = document.querySelectorAll('.toggled_div');

  show_btn.disabled = (display == 'block');
  hide_btn.disabled = (display == 'none');

  for (var i = 0; i < divs.length; i++) {
    divs[i].style.display = display;
  }
}

<input id="hide-div-btn" type="button" name="answer" class="Button" value="Tout plier" />
<input id="show-div-btn" type="button" name="answer" class="Button" value="Tout déplier" />

<div class="toggled_div" id="content_caract_1">content_caract 1</div>
<div class="toggled_div" id="content_caract_2">content_caract 2</div>
<div class="toggled_div" id="content_caract_3">content_caract 3</div>
<div class="toggled_div" id="content_caract_4">content_caract 4</div>

For disable button you can use disabled attribute. For toggle button after click you need .setAttribute() and .removeAttribute().

Also I reend you don't use onclick attribute for handle click event. Would be better if you replace onclick on .addEventListener(). You can read this documentation for improve your code.

var btnShow = document.getElementById('showDive');
var btnHide = document.getElementById('hideDive');

btnShow.addEventListener('click', showDiv);
btnHide.addEventListener('click', hideDiv);

function toggleButton(isShowed) {
  if (isShowed) {
    btnShow.setAttribute('disabled', '');
    btnHide.removeAttribute('disabled');
  } else {
    btnHide.setAttribute('disabled', '');
    btnShow.removeAttribute('disabled');
  }
}


function showDiv() {
  document.getElementById('content_caract_1').style.display = "block";
  document.getElementById('content_caract_2').style.display = "block";
  document.getElementById('content_caract_3').style.display = "block";
  document.getElementById('content_caract_4').style.display = "block";
  toggleButton(true);
}

function hideDiv() {
  document.getElementById('content_caract_1').style.display = "none";
  document.getElementById('content_caract_2').style.display = "none";
  document.getElementById('content_caract_3').style.display = "none";
  document.getElementById('content_caract_4').style.display = "none";
  toggleButton(false);
}

<input type="button" name="answer" class="Button" value="Tout plier" id="hideDive"/>
<input type="button" name="answer" class="Button" value="Tout déplier" id="showDive" disabled/>

<div id="content_caract_1">content_caract_1</div>
<div id="content_caract_2">content_caract_2</div>
<div id="content_caract_3">content_caract_3</div>
<div id="content_caract_4">content_caract_4</div>