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 http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
        <style>
            body {
                padding-top: 50px;
                padding-bottom: 20px;
            }
        </style>
    </head>
    <body>
    <div class="container">
    <div class="row">
      <div id="main_row" class="col-md-8 col-md-offset-2">
      
        <div id="one" class="col-md-4 section">
          <h1>Кафе/Ресторан </h1>
          <div id="one_two" class="col-md-12">
            Второй этап
            <span id="back_a" >Назад</span>
          </div>
        </div>
        <div id="two"  class="col-md-4 section">
          <h1>Фастфуд/Столовая </h1>
          <div id="two_two" class="col-md-12">
            Второй этап
            
          </div>
        </div>
        <div id="three" class="col-md-4 section">
          <h1>Клуб</h1>
          <div id="three_two" class="col-md-12">
            Второй этап
            
          </div>
        </div>
      </div>
    </div>
  </div>
    </body>  
</html>
 
var step = "1";
​
$('.section').hover(function() {
  $(this).addClass('hover');
}, function() { 
  $(this).removeClass('hover'); 
});
​
$('#one').on("click", function() {
  $("#one").removeClass("col-md-4");
  $("#one").addClass("col-md-12");
  $("#two").addClass("hiden");
  $("#three").addClass("hiden");
  step = "2";
});
​
$('#two').on("click", function() {
  $("#two").removeClass("col-md-4");
  $("#two").addClass("col-md-12");
  $("#one").addClass("hiden");
  $("#three").addClass("hiden");
  step = "2";
});
​
$('#three').on("click", function() {
  $("#three").removeClass("col-md-4");
  $("#three").addClass("col-md-12");
  $("#two").addClass("hiden");
  $("#one").addClass("hiden");
  step = "2";
});
​
$(function() {
  $('#back_a').on("click", function(e){
    e.stopPropagation();
    console.log($('#one'));
    $("#one").removeClass('col-md-12').addClass('col-md-4');
  });
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers