Trying to create a display/hide toggle content using jQuery?

Question

So I have a list of links, when clicked on one the div with content should display, easy enough but my solution isn't working, ideas?

Also I this lined commented out because Im not sure I NEED this since i am already hiding and displaying divs by changing their css class, (right?)

  // $('').toggleClass(''); --- Not sure if I need this? AND how I'd use it?..

/* Service Panel - toggle */
(function($) {

    $(document).ready(function() {

      $(document).ready(function() {
        // $('').toggleClass(''); --- Not sure if I need this? AND how I'd use it?..
        $('#family-law-item').click(function() {
          $(".hide-other-desc").css({
            "display": "none"
          });
          $(".family-law-desc").css({
            "display": "block"
          });
        });
        $('#stock').click(function() {
          $(".hide-other-desc").css({
            "display": "none"
          });
          $(".criminal-law-desc").css({
            "display": "block"
          });
        });
        $('#workshop').click(function() {
          $(".hide-other-desc").css({
            "display": "none"
          });
          $(".corporate-law-desc").css({
            "display": "block"
          });
        });
        $('#all-courses').click(function() {
          $(".hide-other-desc").css({
            "display": "none"
          });
          $(".international-law-desc").css({
            "display": "block"
          });
        });

      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="services-panel">
  <nav class="services-items">
    <li id="family-law-item"><a href="#"> Family Law</a></li>
    <li id="criminal-law-item"><a href="#"> Criminal Law</a></li>
    <li id="corporate-law-item"><a href="#"> Corporate Law</a></li>
    <li id="international-law-item"><a href="#"> International Law</a></li>
  </nav>
  <div class="service-desc-wrap">
    <article id="family-law-desc hide-other-desc">
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
      a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
      more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
    </article>
    <article id="criminal-law-desc hide-other-desc">
      bbbbbbbbbbbbbbbbLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
      book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
      with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
    </article>
    <article id="corporate-law-desc hide-other-desc">
      ccccccccccccccccccLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
      book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
      with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
    </article>
    <article id="international-law-desc hide-other-desc">
      ddddddddddddddddddddddddddLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
      type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
      more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
    </article>
  </div>
</section>

Answer 1

you can try following code:

<div id="dataDiv">
    <p>Hello How are you?</p>
</div>

<script>
function toggle()
{
    $('#dataDiv').toggle();
}
</script>

Answer 2

Many way you can achieve that now you can try following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function() {
    $('.services-items a').click(function(){
        $('.service-desc-wrap article').hide();
        $($(this).attr('href')).show();
        return false
    })
})

<body>
<style>
.hide { display:none;}
</style>
<section class="services-panel">
<nav class="services-items">
    <li id="family-law-item"><a href="#family-law-desc"> Family Law</a></li>
    <li id="criminal-law-item"><a href="#criminal-law-desc"> Criminal Law</a></li>
    <li id="corporate-law-item"><a href="#corporate-law-desc"> Corporate Law</a></li>
    <li  id="international-law-item"><a href="#international-law-desc"> International Law</a></li>
</nav>
<div class="service-desc-wrap">
    <article id="family-law-desc">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and  scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with    the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>          
    </article>
    <article id="criminal-law-desc" class="hide">
        bbbbbbbbbbbbbbbbLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and  scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with    the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>          
    </article>  
    <article id="corporate-law-desc" class="hide">
        ccccccccccccccccccLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and    scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with    the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>          
    </article>
    <article id="international-law-desc" class="hide">
        ddddddddddddddddddddddddddLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and    scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with    the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>          
    </article>          
    </div>
</section>
</body>
</html>

Answer 3

1. Use .hide() and .show().
2. Change id to class in your HTML on the article tags.
3. Change your jQuery selectors to match your links.

You should only have one id per element and that id should be unique for the entire document.

(function($) {

  $('#family-law-item').click(function() {
    $(".hide-other-desc").hide();
    $(".family-law-desc").show();
  });

  $('#criminal-law-item').click(function() {
    $(".hide-other-desc").hide();
    $(".criminal-law-desc").show();
  });

  $('#corporate-law-item').click(function() {
    $(".hide-other-desc").hide();
    $(".corporate-law-desc").show();
  });

  $('#international-law-item').click(function() {
    $(".hide-other-desc").hide();
    $(".international-law-desc").show();
  });

}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="services-panel">
  <nav class="services-items">
    <li id="family-law-item"><a href="#"> Family Law</a></li>
    <li id="criminal-law-item"><a href="#"> Criminal Law</a></li>
    <li id="corporate-law-item"><a href="#"> Corporate Law</a></li>
    <li id="international-law-item"><a href="#"> International Law</a></li>
  </nav>
  <div class="service-desc-wrap">
    <article class="family-law-desc hide-other-desc">
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
      a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
      more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
    </article>
    <article class="criminal-law-desc hide-other-desc">
      bbbbbbbbbbbbbbbbLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
      book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
      with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
    </article>
    <article class="corporate-law-desc hide-other-desc">
      ccccccccccccccccccLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
      book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
      with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
    </article>
    <article class="international-law-desc hide-other-desc">
      ddddddddddddddddddddddddddLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
      type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
      more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
    </article>
  </div>
</section>

As for .toggleClass(), it works like this:

if the element does not have the class:
  add the class
if the element already has the class:
  remove the class