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">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <title>JS Bin</title>
</head>
<body>
    <div id="accordion">
    
    <a  class="btn btn-danger b1" href="#menu1" data-toggle="collapse"  aria-controls="menu1" data-parent="#accordion">MENU 1</a>
    <a  class="btn btn-danger b2" href="#menu2" data-toggle="collapse" aria-controls="menu2" data-parent="#accordion">MENU 2</a>
    <div class="accordion-group">
    <div class="collapse" id="menu1">
        <h1> here comes the table1</h1>
    </div>
    
    
    
    
    <div class="collapse" id="menu2">
        <h1> here comes the table2</h1>
    </div>
    </div>
    </div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
 
$(document).ready(function(){
  $(".b1").click(()=>{
    $("#menu2").hide();
    $("#menu1").show();
  });
  $(".b2").click(()=>{
    $("#menu2").show();
    $("#menu1").hide();
  })
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers