根据条件显示和隐藏子div

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>