I'm using CHANGE () to capture a STRING ID (VALUE on a FORM) and using that ID to hide or show the selected DIV. In the first pass in the selection box (SELECT OPTION) the expected occurs, but when I go back and select another item, the previous one does not disappear. what am I doing wrong? Could someone explain me?
The jQuery SCRIPT, CSS (with the 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><selectid="area">
<option value=" " selected="selected"> </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>