title: Hide/show cards in bootstrap
body: <p>Im trying to hide and show a few cards in bootstrap, but I can't figure it out. 
  All cards have the class card (of course) and im trying to hide all those cards when a button is clicked. Here is what I have now:</p>
  
  <pre><code>function myFunction() {
  
    jQuery(document).ready(function($) {
      $(".card").hide();
    });
  
    var game = document.getElementById("game").value;
    var resolution = document.getElementById("resolution").value;
    var graphic = document.getElementById("graphic").value;
  
    if (game == "Black" &amp;&amp; graphic == "high" &amp;&amp; resolution == "1080") {
      alert("Hello " + game + "! You will now be redirected to www.w3Schools.com");
    } else if (book == "Red") {
  
    } else if (book == "Green") {
  
    } else {
  
    }
  }
  </code></pre>
  
  <p>The call for the function is correct cause the alert does work properly.</p>
  
  <p>For some reason the </p>
  
  <pre><code>jQuery(document).ready(function($) {
          $(".card").hide();
        });
  </code></pre>
  
  <p>part does work when outside the js function (when it's not connected to the button).</p>
  
  <p>No idea if it helps but here is also a snipped of my bootstrap doc:</p>
  
  <pre><code>&lt;button type="submit" class="btn btn-primary" id="btn" onclick="myFunction()"&gt;Submit&lt;/button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
          &lt;!-- Results --&gt;
          &lt;div class="card" id="p2" style="width:200px; margin:30px"&gt;
            &lt;img class="card-img-top" src="https://image" alt="Card image" style="width:100%"&gt;
            &lt;div class="card-body"&gt;
              &lt;h5 class="card-title"&gt;Processor&lt;/h5&gt;
              &lt;p&gt;&lt;a href="#"&gt;Newegg&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#"&gt;Newegg&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#"&gt;Newegg&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="card" id="p3" style="width:200px; margin:30px"&gt;
            &lt;img class="card-img-top" src="https://image" alt="Card image" style="width:100%"&gt;
            &lt;div class="card-body"&gt;
              &lt;h5 class="card-title"&gt;Graphic card&lt;/h5&gt;
              &lt;p&gt;&lt;a href="#"&gt;Newegg&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#"&gt;Newegg&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#"&gt;Newegg&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Here the things I've tried already:</p>
  
  <p>The toggle <a href="https://stackoverflow.com/questions/49830079/how-to-hide-and-show-bootstrap-4-cards-by-hovering-over-navigation-menu-through">How to hide and show bootstrap 4 cards by hovering over navigation menu through css?</a></p>
  
  <p>Standard js document.getElementById(".card").style.display = "none";</p>
  
  <p>I've looked at the react stuff, but I don't understand that.</p>