Hide The Parent Div On Click Event

I have the list perspective-list item Blogs,Case_Studies,Whitepapers with respective class.on click the list item it show the respective element in '.page-perspective' ie.If I clic

Solution 1:

As you mentioned that all codes are coming dynamically and you have some height for the views-row section, so you want to hide views-row section instead of inside element section. For this you have to do the following.

1. When it is loading remove all the default style attribute for the inner elements.
2. Now it becomes all the elements is visible, so hide all the views-row element.
3. As per your requirement, slice the Whitepapers section and find it is respective parent of parent views-row and show it up.
4. After clicking each link, you have to find the parent of parent and show/hide element.

I have implemented the above steps in the following Snippet.

(function($) {
  functionperspective_type() {
    $(".perspective-list a").click(function(e) {
      e.preventDefault();
      $(".perspective-list a").parent().removeClass('active');
      //$('.wrapper .page-perspective').slice(0,3).show(); /*Not sure what this line is doing. no need of this.*/var href = $(this).attr('href');
      $('.wrapper > :not(.' + href + ')').parent().parent().hide();
      $('.wrapper > .' + href + '').slice(0,3).parent().parent().show();
      $(this).parent().addClass('active');
    });
    $(".perspective-list a").mouseover(
      function() {
        $(".perspective-list a").removeClass('hover');
        $(this).parent().addClass('hover');
      });
    $(".perspective-list a").mouseout(
      function() {
        $(".perspective-list a").each(function() {
          $(this).parent().removeClass('hover');
        });
      });
    $('#perspectives .perspectiveReadurl', '#page_perspectives .perspectiveReadurl').find('a').attr('target', '_blank');
  }
  jQuery(document).ready(function($) {
    $('.wrapper .page-perspective').removeAttr('style');
    $('.views-row').hide();
    $('.Whitepapers').slice(0,4).parent().parent().show();
    perspective_type();
  });

})(jQuery)

.views-row{
height:50px;
border:1px solid red;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="page_perspectives"><divclass="view view-page-perspectives view-id-page_perspectives"><divclass="perspective-list"><ulclass="nav nav-justified"><liclass=""><aclass="Blogs"href="Blogs">Blogs</a></li><li><aclass="Case_Studies"href="Case_Studies">Case Studies</a></li><liclass="active"><aclass="Whitepapers"href="Whitepapers">Whitepapers</a></li></ul></div><divclass="view-content"><divclass="views-row views-row-1 views-row-odd views-row-first"><divclass="wrapper"><divclass="page-perspective row Whitepapers"style="display: none;">
            Whitepaper 1
          </div></div></div><divclass="views-row views-row-2 views-row-even"><divclass="wrapper"><divclass="page-perspective row Blogs"style="display: none;">
            Blogs 1
          </div></div></div><divclass="views-row views-row-3 views-row-odd"><divclass="wrapper"><divclass="page-perspective row Whitepapers"style="display: none;">
            Whitepaper 2
          </div></div></div><divclass="views-row views-row-4 views-row-even"><divclass="wrapper"><divclass="page-perspective row Case_Studies"style="display: none;">
            Case study 1
          </div></div></div><divclass="views-row views-row-5 views-row-odd"><divclass="wrapper"><divclass="page-perspective row Blogs"style="display: none;">
            Blogs 2
          </div></div></div><divclass="views-row views-row-6 views-row-even"><divclass="wrapper"><divclass="page-perspective row Whitepapers"style="display: none;">
            Whitepaper 3
          </div></div></div><divclass="views-row views-row-7 views-row-odd views-row-last"><divclass="wrapper"><divclass="page-perspective row Whitepapers"style="display: none;">
            Whitepaper 4
          </div></div></div></div></div></div>

Here is the fiddle version.