I think my jQuery code is not working. When I click on the bubbles it should disappear but nothing is happening. I tried pasting this one codepen and it works over there but it does not work when I do it on sublime text or any other editor. Any help would be appreciated, thanks.

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <style>
    body {
      background-color: #ffccff;
    }
    
    .circle {
      width: 30%;
      background: #e6ffff;
      padding-bottom: 30%;
      float: left;
      margin: 1.66%;
      border-radius: 90px;
      box-shadow: 5px 5px 10px #ffffff;
    }
    
    #container {
      max-width: 600px;
      margin: 0 auto;
    }
    
    .hidden {
      visibility: hidden;
    }
    
    .visible {
      visibility: visible;
    }
  </style>
  <script>
    $(".circle").click(function() {
      $(this).removeClass("visible").addClass("hidden");
    });

    $(".restart").click(function() {
      $(".circle").removeClass("hidden").addClass("visible");
    });
  </script>
</head>

<body>

  <div id="container">

    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <button class="restart">Restart</button>
  </div>

</body>

</html>

1 Answers

0
sonic On Best Solutions

When I copy your code to jsFiddle here: https://jsfiddle.net/r9zda0cv/ Everything works.

Try to wrap up your javascript in ready

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <style>
    body {
      background-color: #ffccff;
    }

    .circle {
      width: 30%;
      background: #e6ffff;
      padding-bottom: 30%;
      float: left;
      margin: 1.66%;
      border-radius: 90px;
      box-shadow: 5px 5px 10px #ffffff;
    }

    #container {
      max-width: 600px;
      margin: 0 auto;
    }

    .hidden {
      visibility: hidden;
    }

    .visible {
      visibility: visible;
    }
  </style>
  <script>
  $(document).on("ready", function(){
    $(".circle").click(function() {
      $(this).removeClass("visible").addClass("hidden");
    });

    $(".restart").click(function() {
      $(".circle").removeClass("hidden").addClass("visible");
    });

  });

  </script>
</head>

<body>

  <div id="container">

    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <button class="restart">Restart</button>
  </div>

</body>

</html>