title: Show and hide child div as per the condition
body: <p>This code I written for to show child category when clicking on the parent category. And it working good.</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>$(function(){
    $(".class1-parrent").on("click",function(){
      $(".after-class").css("display","none");
      $('.class1-child').appendTo('.after-4');
      $(".after-4").css("display","flex");
      $(".common-child-class").css("display","none");
      $(".class1-child").css("display","block");
    });
  
    $(".class2-parrent").on("click",function(){
      $(".after-class").css("display","none");
      $('.class2-child').appendTo('.after-4');
      $(".after-4").css("display","flex");
      $(".common-child-class").css("display","none");
      $(".class2-child").css("display","block");
    });
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.after-4, .after-5 {
    border: 1px solid black;
    display:none;
    width:100%;
  }
  .common-parrent-class {
    border:1px solid black;
    margin:2px;
    float:left;
    width:20%;
    cursor:pointer;
  }
  .main, .sub-category {
    display: inline-table;
    padding:22px;
    border:1px solid black;
  }
  .sub-category {
    margin-top:10%;
    display:none;
    width:100%;
  }
  .common-child-class {
    display:none;
    width:100%;
  }
  .inner {
    float:left;
    width:24%;
    margin:2px;
  }
  @media screen and (max-width: 299px) and (min-width:200px){
    .common-parrent-class, .inner {
      width:60%;
    }  
  }
  @media screen and (max-width: 420px) and (min-width:300px){
    .common-parrent-class, .inner {
      width:40%;
    }  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-6 main"&gt;
  
        &lt;div class="main-category"&gt; 
          &lt;div class="class1-parrent common-parrent-class"&gt;Class1&lt;/div&gt;
          &lt;div class="class2-parrent common-parrent-class"&gt;Class2&lt;/div&gt;
          &lt;div class="class3-parrent common-parrent-class"&gt;Class3&lt;/div&gt;
          &lt;div class="class4-parrent common-parrent-class"&gt;Class4&lt;/div&gt;
          &lt;div class="after-4 after-class"&gt;&lt;/div&gt;
          &lt;div class="class5-parrent common-parrent-class"&gt;Class5&lt;/div&gt;
          &lt;div class="after-5 after-class"&gt;&lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;div class="sub-category"&gt;
  
          &lt;div class="class1-child common-child-class"&gt;
            &lt;div class="class1-child-inner inner"&gt;Class 1&lt;/div&gt;
            &lt;div class="class1-child-inner inner"&gt;Class 1&lt;/div&gt;
            &lt;div class="class1-child-inner inner"&gt;Class 1&lt;/div&gt;
            &lt;div class="class1-child-inner inner"&gt;Class 1&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="class2-child common-child-class"&gt;
            &lt;div class="class2-child-inner inner"&gt;Class 2&lt;/div&gt;
            &lt;div class="class2-child-inner inner"&gt;Class 2&lt;/div&gt;
            &lt;div class="class2-child-inner inner"&gt;Class 2&lt;/div&gt;
            &lt;div class="class2-child-inner inner"&gt;Class 2&lt;/div&gt;
          &lt;/div&gt;
  
  
  
        &lt;/div&gt;
  
  
  
  
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here I only write code for class1 and class2.</p>
  
  <p>What I need is when we click parent category(class) then </p>
  
  <blockquote>
    <p>(1) Show it's child category &amp; after-class  if child category not
    displayed </p>
    
    <p>(2)Hide it's child category &amp; after-class if  it is already</p>
  </blockquote>
  
  <p>How to do this ?</p>