Showing the child category when Clicking the parent category


Tags: javascript,jquery,css3

Problem :

We have some parent category. When clicking on the category, its corresponding child will become visible. We have written code to show the child category when clicking on the parent category. Please see this code and working jsfiddle.

  $(function(){
      
      $(".class1-parrent").on("click",function(){
          
          $(".sub-category").css("display","inline-block");
          $(".common-child-class").css("display","none");
          $(".class1-child").css("display","block");
      });
      
       $(".class2-parrent").on("click",function(){
          
          $(".sub-category").css("display","inline-block");
          $(".common-child-class").css("display","none");
          $(".class2-child").css("display","block");
      });
       $(".class3-parrent").on("click",function(){
          
          $(".sub-category").css("display","inline-block");
          $(".common-child-class").css("display","none");
          $(".class3-child").css("display","block");
      });
       $(".class4-parrent").on("click",function(){
          
          $(".sub-category").css("display","inline-block");
          $(".common-child-class").css("display","none");
          $(".class4-child").css("display","block");
      });
       $(".class5-parrent").on("click",function(){
          
          $(".sub-category").css("display","inline-block");
          $(".common-child-class").css("display","none");
          $(".class5-child").css("display","block");
      });
   $(".class6-parrent").on("click",function(){
      
      $(".sub-category").css("display","inline-block");
      $(".common-child-class").css("display","none");
      $(".class6-child").css("display","block");
  });
  
  $(".class7-parrent").on("click",function(){
      
      $(".sub-category").css("display","inline-block");
      $(".common-child-class").css("display","none");
      $(".class7-child").css("display","block");
  });
  
  $(".class8-parrent").on("click",function(){
      
      $(".sub-category").css("display","inline-block");
      $(".common-child-class").css("display","none");
      $(".class8-child").css("display","block");
  });
  });
 .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;
      }
      
      .inner{
          float:left;
          width:25%;
          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%;
                }  
                
                
            }
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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="class5-parrent common-parrent-class">Class5</div>
           <div class="class6-parrent common-parrent-class">Class6</div>
           <div class="class7-parrent common-parrent-class">Class7</div>
           <div class="class8-parrent common-parrent-class">Class8</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 class="class3-child common-child-class">
                <div class="class3-child-inner inner">Class 3</div>
                <div class="class3-child-inner inner">Class 3</div>
                <div class="class3-child-inner inner">Class 3</div>
                <div class="class3-child-inner inner">Class 3</div>
             </div>
         
              <div class="class4-child common-child-class">
                <div class="class4-child-inner inner">Class 4</div>
                <div class="class4-child-inner inner">Class 4</div>
                <div class="class4-child-inner inner">Class 4</div>
                <div class="class4-child-inner inner">Class 4</div>
             </div>

              <div class="class5-child common-child-class">
                <div class="class5-child-inner inner">Class 5</div>
                <div class="class5-child-inner inner">Class 5</div>
                <div class="class5-child-inner inner">Class 5</div>
                <div class="class5-child-inner inner">Class 5</div>
             </div>
           <div class="class6-child common-child-class">
            <div class="class6-child-inner inner">Class 6</div>
            <div class="class6-child-inner inner">Class 6</div>
            <div class="class6-child-inner inner">Class 6</div>
            <div class="class6-child-inner inner">Class 6</div>
         </div>
         
      <div class="class7-child common-child-class">
            <div class="class7-child-inner inner">Class 7</div>
            <div class="class7-child-inner inner">Class 7</div>
            <div class="class7-child-inner inner">Class 7</div>
            <div class="class7-child-inner inner">Class 7</div>
         </div>
         
   <div class="class8-child common-child-class">
            <div class="class8-child-inner inner">Class 8</div>
            <div class="class8-child-inner inner">Class 8</div>
            <div class="class8-child-inner inner">Class 8</div>
            <div class="class8-child-inner inner">Class 8</div>
         </div>      
          
              

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

What we need is when the parent category is clicked then its child should be shown as the second row near to its parent.

For example, when we search on Google and select the images tab then we can see the all images, when we click on images then its child images are shown by expanding the result div near the parent image.

[![enter image description here][2]][2]

How we can do this? What changes need to done in HTML, CSS and Jquery?



Solution :

I guess the question here is to show the division below the row containing the parent division. If height of the parent elements is same then what you can do is -

  1. compare for top offset of all the parent categories with all other parent categories.
  2. select the rightmost parent category with top offset less than equals the top offset of selected category.
  3. insert the div with sub-category class after above selected category.

so the changes in code are as follows:

Javascript/Jquery

add following function to javascript

function reposition(parent){
    var top = $(parent)[0].offsetTop;
    var arr = $('.common-parrent-class').filter(function(index){
        return $('.common-parrent-class')[index].offsetTop <= top+$(parent)[0].scrollHeight;
    });
    $('.sub-category').insertAfter($(arr[arr.length-1]));

}

then add function call to each onclick function for parent category like follows

$(".class1-parrent").on("click",function(){
      reposition(".class1-parrent");   // <== Add this line to all on click function calls 
      $(".sub-category").css("display","inline-block");
      $(".common-child-class").css("display","none");
      $(".class1-child").css("display","block");
});

Here is the working fiddle


    CSS Howto..

    DotNetNuke Skinning: How do I use\add skin.css?

    How to insert instance variable as css rule in Rails?

    CSS dropdown menu not showing the full texts of submenu items

    How to reference another selector in css

    How to deal with image references in CSS in a Rails 3.1 app

    Does HTML5 DOCTYPE affect how CSS3 effects are rendered?

    Angular. How to set css properties for “after” and “before” DOM psuedo elements

    How can add atribute to css of page on page load event

    Styling the placeholder of an input, how can I do this? [duplicate]

    HTML & CSS: How to create four equal size tabs that fill 100% width?

    How to localize the CSS just for this table's use?

    How do I keep multiple DIVs the same height using jQuery?

    JavaFX 8 - How to change the color of the prompt text of a NOT editable combobox via CSS?

    How to apply css rules to html element using ExtJS?

    How do you have a hidden div appear and change sizes using css or jquery?

    How to get rid of the left and top margins in css when using html2pdf

    CSS: how to get two floating divs inside another div

    How to select element, enclose it in a div and add a class to it, in pure javascript?

    How do I remove this unwanted space which seems to be background repeating HTML/CSS

    How to use one popup box to display arbitrary number of information respectively?

    navbar is split into multiple div classes - how to stick them all to the top on scroll? (javescript)

    How to set a style one a parent element [duplicate]

    How to adjust the application with equal resolution in different browsers? [closed]

    CSS How to make image fluid extending only to one side of browser, aligned with centered content?

    How to apply CSS to td of particular table using Classname? [duplicate]

    How to apply SVG filter to an element?

    How to preserve css class name through GWT compilation?

    How to align a button inside a DIV

    I have the CSS & JS, how do I convert that to erb for my Rails app?

    Modernizr: IE10 & Flexbox: How to get IE10 flexbox detected