Twisties

Twisties are blocks of content that expand or collapse on click, and thus reveal or hide the information contained therein. Twisties are one method of making available additional information only on demand. In this example, the twistie is implemented through the twistie.js file by using a "twistie" class on the element that contains the additional information.

Example of twisties in action

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Aah ko chaahiye ik umr asar hone tak, kaun jeeta hai teree zulf ke sar hone tak. Bas ki dushwaar hai har kaam ka aasaan hona, admi ko bhi muyassar naheen insaan hona. Chand tasveer-e-buta, chand haseeno ke khatoot, bad marne ke mere ghar se ye saaman nikla.

Twistie one (expand/collapse)

Aah ko chaahiye ik umr asar hone tak, kaun jeeta hai teree zulf ke sar hone tak. Bas ki dushwaar hai har kaam ka aasaan hona, admi ko bhi muyassar naheen insaan hona. Chand tasveer-e-buta, chand haseeno ke khatoot, bad marne ke mere ghar se ye saaman nikla.

Dil hi to hai, na sang-o-khisht, dard se na bhar aye kyun? Ek din hamare annsoon humse pooch baithe...humey roz -roz kyon bulate ho. Fir kuch is dil ko beqaraari hai, seena zoya-e-zakhm-e-kaari hai. Go hath ko jumbish nahin ankhon men to dum hai, rehne do abhi sagar-o-meena mere aage.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Twistie two (expand/collapse)

Har ek baat pe kehte ho tum ke tu kya hai, tum hi kaho, ke ye andaaz-e-guftgu kya hai? Ishq ne humein nikamma kar diya Ghalib, warna aadmi they hum bade kaam ke. Jo unke dekhe se aa jati hai munh pe raunaq, to woh kehte hain: beemar ka haal achchha hai.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

How to implement twisties

Where is the Javascript code and stylesheet file

The Javascript code is in the "scripts" folder, "twistie.js" file. The styling rule is in the "css" folder, "twistie.css" file.