ผมทำเป็นแท็บเมนูเล็ก ๆ มุมบนซ้ายของจอครับ
เปิดแท็บด้วยการ 'คลิก' หรือกด 'M' แท็บจะอนิเมทออกมาจน "width: 100%"  แล้วตัวหนังสือค่อยหล่นลงมาอยู่ในแท็บ
ปิดแท็บด้วยการ 'คลิก' ที่ element อื่น ๆ ที่ไม่ใช่แท็บเมนู หรือกด 'M' แล้วตัวหนังสือจะเด้งหายไปข้างบนไล่เลี่ยกับแท็บที่อนิเมทหดกลับมาเท่าเดิม

ปัญหาอยู่ที่:
1. ถ้าผม 'คลิก'  element อื่นที่ไม่ใช่แท็บเมนู (ไม่ได้ต้องการเปิดแท็บเมนู) หนึ่งที ตัวหนังสือที่ซ่อนไว้ด้านบนก็อนิเมทขึ้นไปข้างบนหนึ่งที คลิกอีกทีก็อนิเมทต่อไปอีกที
พอมาคลิกเปิดแท็บเมนู ตัวหนังสือมันก็ไม่โผล่มา เพราะมันอนิเมทหายไปข้างบนสองรอบแล้ว ต้องกดแท็บเมนูอีกสองรอบ เพื่อให้มันโผล่ออกมาครับ
2. ถ้าผมกด 'M' ครั้งแรกเพื่อเปิดแท็บเมนู ทุกอย่างปกติครับ เมื่อกด 'M' อีกที โดยหวังว่าจะปิดแท็บเมนู นอกจากแท็บจะไม่ปิดแล้ว ตัวหนังสือกลับอนิเมทลงมาอีกที พอกด 'M' อีกที มันก็อนิเมทลงมาอีกทีครับ คือถ้ากด 'M' 3 ที มันก็อนิเมทลงมา 3 ที ต้องคลิก  3 ทีให้มันอนิเมทกลับไปซ่อนอยู่ข้างบนครับ

ลองได้ในลิงค์นี้ครับ: https://jsfiddle.net/899z1enw/

ผมอยากให้ฟังก์ชั่นมันเป็นเหมือน .toggle() น่ะครับ แต่ .toggle() มันแค่ show กับ hide element ใช่ไหมครับ อันนี้ผมทำเป็น .animate() เลยใช้ .toggle() ไม่ได้
คิดไม่ออกว่าจะเขียนฟังก์ชั่นยังไงดีครับ ช่วยชี้แนะด้วยครับ ผมกำลังฝึกทำเว็บอยู่ครับ