Show and hide child div as per the condition

Question

This code I written for to show child category when clicking on the parent category. And it working good.

$(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");
  });


});

.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%;
  }  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-6 main">

      <div class="main-category"> 
        <div class="class1-parrent common-parrent-class">Class1</div>
        <div class="class2-parrent common-parrent-class">Class2</div>
        <div class="class3-parrent common-parrent-class">Class3</div>
        <div class="class4-parrent common-parrent-class">Class4</div>
        <div class="after-4 after-class"></div>
        <div class="class5-parrent common-parrent-class">Class5</div>
        <div class="after-5 after-class"></div>

      </div>

      <div class="sub-category">

        <div class="class1-child common-child-class">
          <div class="class1-child-inner inner">Class 1</div>
          <div class="class1-child-inner inner">Class 1</div>
          <div class="class1-child-inner inner">Class 1</div>
          <div class="class1-child-inner inner">Class 1</div>
        </div>

        <div class="class2-child common-child-class">
          <div class="class2-child-inner inner">Class 2</div>
          <div class="class2-child-inner inner">Class 2</div>
          <div class="class2-child-inner inner">Class 2</div>
          <div class="class2-child-inner inner">Class 2</div>
        </div>



      </div>





    </div>
  </div>
</div>

Here I only write code for class1 and class2.

What I need is when we click parent category(class) then

(1) Show it's child category & after-class if child category not displayed

(2)Hide it's child category & after-class if it is already

How to do this ?

Answer 1

Here is the jsfiddle for solution:

Demo

You can write like this to show and hide.

Edit : To hide after class then modify the code to this

if(status == 'none'){
            $('.'+$child).appendTo('.after-4');
           $(".after-4").css("display","flex");
           $(".common-child-class").css("display","none");
           $('.'+$child).css("display","block");
           }
            if(status == 'block'){
                $(".after-4").css("display","none");
            }

Answer 2

Here is the solution. Add the given jquery.

$(".class3-parrent").on("click",function(e){
          $(".common-child-class").hide();
          $(".after-4.after-class").hide();
      });

Working DEMO!!!

Answer 3

Use the toggle(), I have done a basic sample. You can do the styling and aligment part.

$(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");
        //$('.class1-child common-child-class').toggle('show');
         //$(".common-child-class").css("display","none");
           $(".class1-child").toggle('hide')
      });
      
       $(".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");
         
         $(".class2-child").toggle('hide')
      });
       
       
  });

.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%;
                }  
                
                
            }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
      <div class="col-sm-6 main">
         
         <div class="main-category"> 
           <div class="class1-parrent common-parrent-class">Class1</div>
            <div class="class1-child common-child-class" >
                <div class="class1-child-inner inner">Class 1</div>
                <div class="class1-child-inner inner">Class 1</div>
                <div class="class1-child-inner inner">Class 1</div>
                <div class="class1-child-inner inner">Class 1</div>
             </div>
           <div class="class2-parrent common-parrent-class">Class2</div>
           <div class="class2-child common-child-class">
                <div class="class2-child-inner inner">Class 2</div>
                <div class="class2-child-inner inner">Class 2</div>
                <div class="class2-child-inner inner">Class 2</div>
                <div class="class2-child-inner inner">Class 2</div>
             </div>
           <div class="class3-parrent common-parrent-class">Class3</div>
           <div class="class4-parrent common-parrent-class">Class4</div>
           <div class="after-4 after-class"></div>
           <div class="class5-parrent common-parrent-class">Class5</div>
           <div class="after-5 after-class"></div>
           
        </div>
          
          <div class="sub-category">
              
             
         
              
     
              
              
          </div>
          
          
          
          

    </div>
  </div>
</div>