Cacher is the code snippet organizer for pro developers

// NEW STYLES THAT NEED TO BE ADDED

.courses {
  dd {
    display: flex;
    max-height: 550px;
    overflow: hidden;
  }
  .course {
    &-titles {
      overflow-y: scroll;

      li {
        margin-top: 1em;
        cursor: pointer;
        padding: .25em 0 .25em;

        &.active {
          color: #547636;
          font-weight: bold;
        }
      }
    }
    &-descriptions {
      width: 50%;
      padding: .5em;
      .info {
        display: none;
        margin-top: 1em;

        &.active {
          display: block;
        }
      }
    }
  }
}

// END OF NEW



// ONLY FOR TESTING - Shouldnt be needed for real version on site
dl.courses dd {
  background: #f9f9f9;
  padding: 10px 20px;
  font-size: 1.1em;
  font-weight: 300;
}
dt.drop {
  padding: 10px 20px;
  font-size: 1em;
  padding-right: 35px;
  background: #547636;
  color: #f9f9f9;
  font-weight: 700;
  cursor: pointer;
  margin: 10px 0 0;
  position: relative;
}

dl {
  width: 800px;
}

body {
  background: #6d8e3b;
}

// This is already in the javascript in the theme
$('.drop').on('click', toggleContent);

function toggleContent() {
  $(this).next('dd').slideToggle();
  $(this).toggleClass('open');
}


// This is the new stuff
(function () {
  var CourseTitles = $('.course-titles li');
  var CourseDescriptions = $('.course-descriptions .info');

  function updateInfo() {
    var currentTitle = $(this);
    var id = $(this).attr('id');

    var currentInfo = CourseDescriptions.filter('[data-course=\'' + id + '\']').first();
    // currentInfo = currentInfo[0]

    CourseTitles.removeClass('active');
    currentTitle.addClass('active');

    CourseDescriptions.removeClass('active');
    currentInfo.addClass('active');
  }

  CourseTitles.filter(':first-child').addClass('active')  
  CourseDescriptions.filter(':first-child').addClass('active')  
  CourseTitles.on('click', updateInfo);
})();

<dl class="courses">

  <dt class="drop open">Lorem ipsum dolor sit amet, elit sodales</dt>
  <dd>
    <ul class="course-titles">
      <li id="511">Lorem ipsum dolor sit amet, elit sodales</li>
      <li id="570">Lorem ipsum dolor sit amet, elit sodales</li>
      <li id="571">Lorem ipsum dolor sit amet, elit sodales</li>
      <li id="572">Lorem ipsum dolor sit amet, elit sodales</li>
      <li id="573">Lorem ipsum dolor sit amet, elit sodales</li>
      <li id="574">Lorem ipsum dolor sit amet, elit sodales</li>
      <li id="576">Lorem ipsum dolor sit amet, elit sodales</li>
      <li id="578">Lorem ipsum dolor sit amet, elit sodales</li>
    </ul>

    <div class="course-descriptions">
      <div data-course="511" class="info">Lorem ipsum dolor sit amet, elit sodales sollicitudin eget praesent, at interdum leo dictumst, vitae eget mauris aenean massa felis vitae, hac eget mattis scelerisque faucibus, class amet parturient sed adipiscing nisl.</div>

      <div data-course="570" class="info">Lorem ipsum dolor sit amet, elit sodales sollicitudin eget praesent, at interdum leo dictumst, vitae eget mauris aenean massa felis vitae, hac eget mattis scelerisque faucibus, class amet parturient sed adipiscing nisl.</div>

      <div data-course="571" class="info">Lorem ipsum dolor sit amet, elit sodales sollicitudin eget praesent, at interdum leo dictumst, vitae eget mauris aenean massa felis vitae, hac eget mattis scelerisque faucibus, class amet parturient sed adipiscing nisl.</div>

      <div data-course="572" class="info">Lorem ipsum dolor sit amet, elit sodales sollicitudin eget praesent, at interdum leo dictumst, vitae eget mauris aenean massa felis vitae, hac eget mattis scelerisque faucibus, class amet parturient sed adipiscing nisl.</div>

      <div data-course="573" class="info">Lorem ipsum dolor sit amet, elit sodales sollicitudin eget praesent, at interdum leo dictumst, vitae eget mauris aenean massa felis vitae, hac eget mattis scelerisque faucibus, class amet parturient sed adipiscing nisl.</div>

      <div data-course="574" class="info">Lorem ipsum dolor sit amet, elit sodales sollicitudin eget praesent, at interdum leo dictumst, vitae eget mauris aenean massa felis vitae, hac eget mattis scelerisque faucibus, class amet parturient sed adipiscing nisl.</div>

      <div data-course="576" class="info">Lorem ipsum dolor sit amet, elit sodales sollicitudin eget praesent, at interdum leo dictumst, vitae eget mauris aenean massa felis vitae, hac eget mattis scelerisque faucibus, class amet parturient sed adipiscing nisl.</div>

      <div data-course="578" class="info">Lorem ipsum dolor sit amet, elit sodales sollicitudin eget praesent, at interdum leo dictumst, vitae eget mauris aenean massa felis vitae, hac eget mattis scelerisque faucibus, class amet parturient sed adipiscing nisl.</div>
    </div>
  </dd>

</dl>