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($) {
  function perspective_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;
}

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

Here is the fiddle version.