Q:

How to reveal hidden div on click

I've got a hidden div that successfully slides out on click. However the content inside that div is dependent on which link is clicked and I'm trying to get it to show/hide depending on which link is clicked.
JS Fiddle Here.
All help is greatly appreciated
HTML
    <div id="main-nav">

    <ul class="list-unstyled">
        <li class="sub director-sub"><a href="/directors">Directors</a></li>
        <li><a href="/News">News</a></li>
        <li class="sub contact-sub"><a href="/Contact">Contact</a></li>
        <li>
            <ul class="list-inline social">
                <li class="fb"><a href="#" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                <li><a href="#" target=_"blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                <li><a href=""><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
            </ul><!-- /.list-inline social -->
        </li>
        <li class="sparks">
            lorem ipsum
        </li>
    </ul><!-- /.list-unstyled -->
</div><!-- /#main-nav -->

<div id="sub-nav">
    <div class="sub-content">

        <!--begin directors-->
        <div class="directors-subnav">
        <h2 style="background:orange;">Directors Sub Nav</h2>
            <ul class="list-unstyled">
                <li>Lorem ipsum.</li>
                <li>Atque, neque.</li>
                <li>Omnis, inventore!</li>
                <li>Fugit, atque.</li>
                <li>Nisi, temporibus.</li>
            </ul><!-- /.list-unstyled -->           
        </div><!-- /.directors-subnav -->
        <!--end directors-->

        <!--begin Contact-->
        <div class="contact-subnav">
        <h2 style="background:green;">Contact Sub Nav</h2>
            <ul class="list-unstyled">
                <li>Lorem ipsum.</li>
                <li>Atque, neque.</li>
                <li>Omnis, inventore!</li>
                <li>Fugit, atque.</li>
                <li>Nisi, temporibus.</li>
            </ul><!-- /.list-unstyled -->           
        </div><!-- /.directors-subnav -->
        <!--end directors-->

    </div><!-- /.sub-content -->
</div><!-- /#subnav -->

JS Here:
$(document).ready(function(){

  //get nav container width
  var boxWidth = $('#sub-nav').width();

  // hide subnav
  $('#sub-nav').width(0);
  $('.directors-subnav, .contact-subnav').hide();

  //set nav width to zero
  $('#main-nav li.sub a').click(function(e){

      // remove opened class from other links not clicked
      $("#main-nav li.sub a").not(this).removeClass('opened');

      e.preventDefault();

      if($(this).hasClass('opened')){
        // slide the box closed
        $("#sub-nav").animate({
                width: '0' + 'px'
            });

      } else {
        $("#sub-nav").animate({
                width: boxWidth + 'px'
            });
      }

      // toggle class so we can animate box based on class
      $(this).toggleClass('opened');

      /****** show/hide of page specific content******/
      if($(this).parent().hasClass('.director-sub')){

        // show/hide directors subnav
        $('.directors-subnav').toggle();
        $console.log('directors clicked');

      } else if($(this).parent().hasClass('.contact-sub')) {

        // show/hide contaxct sub nav
         $('.contact-subnav').toggle();
        $console.log('contact clicked');

      }
      /****** end show/hide of page specific content******/

  })

})

A:

You don't need dot in hasClass in lines 34 and 40. It's supposed to be hasClass('director-sub') not hasClass('.director-sub')

A:

This is what you need.
couple of things needed changing.

In both the hasClass function arguments, the class name can not be preceded by a ".".
In the console.log statement, you cant have a $ preceding console.
There was an error in the html as well. in one location (line 14) you need to have target="blank" and not target="blank".

These changes makes the above piece of code work in the fiddle.
Thanks 
Paras
  /****** show/hide of page specific content******/
  if($(this).parent().hasClass('director-sub')){

    // show/hide directors subnav
    $('.directors-subnav').toggle();
    console.log('directors clicked');

  } else if($(this).parent().hasClass('contact-sub')) {

    // show/hide contaxct sub nav
     $('.contact-subnav').toggle();
    console.log('contact clicked');

  }
  /****** end show/hide of page specific content******/

