The change() is not acting as expected, why?

Question

I am using CHANGE() to capture a STRING ID (VALUE in a FORM) and using that ID to hide or show the selected DIV. The first step in the selection box (SELECT OPTION) occurs as expected, but when I go back and select another item, the previous one does not disappear. What am I doing wrong? Could someone explain to me?

The jQuery SCRIPT, CSS (with Ids) and the corresponding HTML snippet are like this:

// jQuery
$( document ) . ready( function() {

  $( "#area" ) . change( function() {

    var valorSelecionado = $( "option:selected" , this ) . val(); 
      console.log( valorSelecionado ); // Debug

    var IDselecionado = $( "#" + valorSelecionado ); 
      console.log( IDselecionado ); // Debug

    $( IDselecionado ) . show( "slow" );
  });
});

#software, 
#redes, 
#hardware, 
#design { 
	display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FORM -->
<form>
  <select id="area">
    <option value=" " selected="selected">&nbsp;</option>
    <option value="software">Software</option>
    <option value="redes">Redes</option>
    <option value="hardware">Hardware</option>
    <option value="design">Design e Programação Visual</option>
  </select>
</form>
<!-- DIV (procedimentos) -->
<div id="procedimentos">
  <!-- 
    1. Software 
  -->
  <div id="software">
    <h2>Software</h2>
    <h5>
      Técnicos responsáveis: <br />
      <em>
      <strong>
      <a href="#">
      Renato e Ricardo
      </a>
      </strong>
      </em>
    </h5>
    <ol>
      <li>Procedimento de software um. </li>
      <li>Procedimento de software dois. </li>
      <li>Procedimento de software três. </li>
    </ol>
  </div>
  <!-- 
    2. Redes 
  -->
  <div id="redes">
    <h2>Redes</h2>
    <h5>
      Técnico responsável: <br />
      <em>
      <strong>
      <a href="#">
      Renato 
      </a>
      </strong>
      </em>
    </h5>
    <ol>
      <li>Procedimento de redes um. </li>
      <li>Procedimento de redes dois. </li>
      <li>Procedimento de redes três. </li>
    </ol>
  </div>
  <!-- 
    3. Hardware 
  -->
  <div id="hardware">
    <h2>Hardware</h2>
    <h5>
      Técnico responsável: <br />
      <em>
      <strong>
      <a href="#">
      Ricardo 
      </a>
      </strong>
      </em>
    </h5>
    <ol>
      <li>Procedimento de hardware um. </li>
      <li>Procedimento de hardware dois. </li>
      <li>Procedimento de hardware três. </li>
    </ol>
  </div>
  <!-- 
    4. Design 
  -->
  <div id="design">
    <h2>Design e Programação Visual</h2>
    <h5>
      Técnico responsável: <br />
      <em>
      <strong>
      <a href="#">
      Alexandre 
      </a>
      </strong>
      </em>
    </h5>
    <ol>
      <li>Procedimento de design um. </li>
      <li>Procedimento de design dois. </li>
      <li>Procedimento de design três. </li>
    </ol>
  </div>
</div>

Answer 1

You must hide the div within the div procedures.

$('#procedimentos > div').hide();

Behold working in jsbin.com