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 />
<title>Welcome to JS Bin</title>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#changeme").change(function(){
      $(".dynamic").css("display", "none");
      $("."+this.value).css("display", "block");
    });
  });
</script>
     <style>
  .dynamic
       {
           height: 30%; 
           width: 100%; 
           background-color: #CCEAFF; 
           margin-top: 2%;
           display:none;
       }
  .Picoas{}
  .Felgueiras{}
  .Benfica{}
  .Maia{} 
  </style>
</head>
  
<body>
  
  <div style="float: right; margin-right: 5%; width: auto;">
        <select style="border: 3px intset; border-radius: 5px; border-color: #17FFFF;" id="changeme">
            <optgroup label="Lisboa">
                <option value="Picoas">Picoas</option>
                <option value="Benfica">Benfica</option>
            </optgroup>
            <optgroup label="Porto">
                <option value="Felgueiras">Felgueiras</option>
                <option value="Maia">Maia</option>
            </optgroup>
        </select>
    </div>
  
  <div style="width: 90%; height: 50%; background-color: #09C; overflow: scroll; overflow-x: hidden; margin-bottom: 15%; margin-left: 5%; margin-right: 5%; text-align: left; color: #000; font-size: 60%;">
    <div class="Picoas dynamic">
        Timberland Picoas<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Felgueiras dynamic">
        Timberland Felgueiras<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Picoas dynamic">
        Timberland Picoas<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Maia dynamic">
        Timberland Maia<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Benfica dynamic">
        Timberland Benfica<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
</div>
  
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers