Как в данном случае сделать так, чтобы описание раскрывалось плавно?
Так.faq > dd {
  display: none;
  margin-left: 35px;
  margin-bottom: 35px;
}$('.faq > dt > a').click(function(e){
  e.preventDefault();
  $(this).parent('dt').next().slideToggle();
});
Или так.faq > dd {
  margin-left: 35px;
  transition: .5s max-height;
  overflow: hidden;
  max-height: 1px;
}
.faq > dt.active + dd {
  max-height: 100px;
}
Свойство display не анимируется, 
1) Можешь задать элементам скрытым нулевую высоту и отступы эти свойства анимируются, но оставить dispaly: block;
2) В библиотеке jq есть готовые методы slideUp(), slideDown() и slideToggle() - погугли, как раз то что тебе нужно