Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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>
</body>
</html>
 
#software, 
#redes, 
#hardware, 
#design { 
    display: none; 
}
 
$( document ).ready( function() {
  $( "#area" ).change( function() {
    var valorSelecionado = $( "option:selected" , this ).val(); 
    $('#procedimentos > div').hide();
    console.log( valorSelecionado ); // Debug
    var IDselecionado = $( "#" + valorSelecionado ); 
    console.log( IDselecionado ); // Debug
    $( IDselecionado ).show("slow");
  });
});
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers