구현해보고자 하는 코드 작성에 대한 질문이 있습니다.

선생님 안녕하세요.

수업을 듣고 만들어보다가 배웠던 것을 활용하여 조금 더 변화를 주고 싶었는데, 인터넷에서 찾아보면서 해봐도 도저히 원하는대로 실행이 되지가 않아 도움을 받고자 질문을 드립니다.

두가지를 해보고 싶었는데 

첫째로는, 만약 제가 active가 되어 있는 타이틀을 다시 한번 눌렀을 때 desc를 완전히 접었다 다시 펼수 있는지 해보려고 했으나 잘 되지가 않네요.. toggleClass()를 이용하여 active를 넣었다 뺐다 해봤지만 title의 active는 넣었다 뺐다가 가능하지만 그에 맞게 desc를 움직이기가 힘든 것 같습니다.

둘째로는,  CSS로 이미지에  transition을 줘서 부드럽게 변할 수 있도록 해보려고 아래와 같이 해봤습니다만, 당연히 제가 잘못 했으니 반응이 없는 것 같습니다..^^

jQuery로는 인터넷에서 검색하여 아래와 같이 작성해 보니 실행이 되기는 합니다.

다만, 제가 작성한 CSS 코드는 어떤 부분에서 잘못되었길래
실행이 되지 않는 것인지 궁금합니다.

마지막으로, 사실 이런 질문들이 수업 내용 외적인 부분인 
질문들인 것 같은데 해도 괜찮은건가요..?

만약 수업 내용 외적인 질문이라 매번 답변이 곤란하시다면
나중에 더 지식이 쌓였을 때 스스로 해보도록 하겠습니다.

감사합니다!