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>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="button1" class="button">1</div>
<div id="button2" class="button">2</div>
<div id="button3" class="button">3</div>
<div id="button4" class="button">4</div>
<div id="button5" class="button">5</div>
  
<div id="divs">
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c3">3</div>
<div class="c4">4</div>
<div class="c5">5</div>
  </div>
  
  
</body>
</html>
 
.button{
  background:#cf5;
cursor:pointer;
display:inline;
  border:2px solid #f1f1f1;
}
​
#divs > div{
  display:none;
}
 
$('.button').click(function(){
     $('.button').css("border-color", "#F1F1F1");
     $( this ).css("border-color", "#FFCC00");
     var n = this.id.split('n')[1];
     $('.c'+ n).show();
});
Output

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

Dismiss x
public
Bin info
roXonpro
0viewers