title: Multiple select dropdown - Collapse when checking optgroup
body: <p>Hi i'm using multi select drop down on my page. Here i'm trying to collapse the sub options when checking group. For example, When we check the copywriting checkbox, all its sub options should be hidden. Since the list are generating dynamically, I have no idea how to get this done. Thanks in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".group-css").on("click", function() {
    $(this).sibling().hide();
  });
  $('#privacy').multipleSelect({
    selectAllText: 'Everyone in Project',
    width: 220,
    filter: true,
    minimumCountSelected: 5,
    ellipsis: true,
    placeholder: 'Category',
    position: "bottom"
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Multiple select Checkbox */
  
  .sub-options {
    padding-left: 20px;
  }
  
  .ms-parent {
    max-width: 300px;
  }
  
  .m-hidden {
    visibility: hidden;
    height: 0px;
  }
  
  .single&gt;label {
    margin-bottom: 0px;
  }
  
  .single&gt;label&gt;input {
    margin-right: 6px;
  }
  
  .single&gt;label&gt;span {
    font-size: 14px;
  }
  
  .group&gt;label {
    font-weight: normal !important;
  }
  
  .privacy-or&gt;label&gt;input {
    display: none;
  }
  
  .privacy-or&gt;label&gt;span {
    display: block;
    text-align: center;
    color: red;
  }
  
  
  /* Multiple select Checkbox ends */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.2/multiple-select.min.js"&gt;&lt;/script&gt;
  &lt;link href="//cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.2/multiple-select.min.css" rel="stylesheet" /&gt;
  &lt;div class="container"&gt;
    &lt;div class="d-flex mt-3"&gt;
      &lt;div class="form-group mr-2 mb-0 privacy-tooltip"&gt;
        &lt;select class="" id="privacy" multiple="multiple"&gt;
          &lt;option disabled="disabled" class="privacy-or"&gt;----- Or -----&lt;/option&gt;
          &lt;optgroup label="No Category"&gt;
            &lt;option value="pugal" class="sub-options m-hidden"&gt;No Category&lt;/option&gt;
          &lt;/optgroup&gt;
          &lt;optgroup label="Copywriting"&gt;
            &lt;option value="1" class="sub-options"&gt;Articles&lt;/option&gt;
            &lt;option value="2" class="sub-options"&gt;Blogposts&lt;/option&gt;
            &lt;option value="3" class="sub-options"&gt;Guestposts&lt;/option&gt;
            &lt;option value="4" class="sub-options"&gt;Press Releases&lt;/option&gt;
          &lt;/optgroup&gt;
          &lt;optgroup label="Link Building"&gt;
            &lt;option value="pugal" class="sub-options m-hidden"&gt;Link Building&lt;/option&gt;
          &lt;/optgroup&gt;
          &lt;optgroup label="Miscellaneous"&gt;
            &lt;option value="pugal" class="sub-options m-hidden"&gt;Miscellaneous&lt;/option&gt;
          &lt;/optgroup&gt;
          &lt;optgroup label="Rankings"&gt;
            &lt;option value="pugal" class="sub-options m-hidden"&gt;Rankings&lt;/option&gt;
          &lt;/optgroup&gt;
          &lt;optgroup label="SEO Implementation"&gt;
            &lt;option value="pugal" class="sub-options m-hidden"&gt;SEO Implementation&lt;/option&gt;
          &lt;/optgroup&gt;
          &lt;optgroup label="SEO Plan"&gt;
            &lt;option value="pugal" class="sub-options m-hidden"&gt;SEO Plan&lt;/option&gt;
          &lt;/optgroup&gt;
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>