如何展開div /顯示隱藏內容

Question

我的目標是擴大.sort寬度並顯示.sort-expand div中的所有內容。當「more」被點擊爲400px時，這個擴展到右側，.sort從200px擴展。而且，當再次點擊時，縮小。

<div class="sort"> 
    <div class="mainimg"></div> 
    <div class="infoarea"> 
     <h3>Main Name</h3> 
     <p>Title of position</p> 
     <p><span class="floatl">Tag01, Tag02</span><span class="floatr"><a href="#" class="show">more</a></span></p> 
    </div> 
    <div class="sort-expand"> 
     <div class="votes"></div> 
     <div class="full-info"></div> 
     <div class="other"></div> 
    </div> 
</div> 

這也需要推動所有其他.sort區域，以便它們不重疊。有任何想法嗎？我會發布我開始的但是很難的事情。非常感謝。

Answer 1

你應該可以使用jQuery的.slideDown()。 .slideDown()將向下推動其他元素，並顯示div的內容。打電話給你想要的div：$("#myDiv").slideDown()如果你想要它再次點擊時縮小，請使用.slideToggle()