Advertisement
Guest User

Udvikleren: drop-down-text-box

a guest
Nov 21st, 2013
111
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.45 KB | None | 0 0
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur interdum sagittis commodo. Duis lacinia pretium aliquet. Morbi suscipit, diam quis varius volutpat, lacus quam luctus arcu, vel euismod tortor arcu sit amet lacus. Nullam ultrices libero arcu, nec accumsan velit fermentum sed. Vivamus id ornare neque, quis consequat nunc. In sit amet lorem eget mauris rutrum interdum. Duis feugiat ligula vitae quam tincidunt ultrices.
  6.  
  7.     <button id="expandText" style="display: block;">Læs mere</button>
  8.  
  9.     <div id="moreText" style="display: none;">Nam elementum neque sem. Nullam non aliquet justo, sed feugiat risus. Fusce a egestas augue. Ut ac hendrerit lorem, quis fringilla eros. Nunc consequat elit in mi faucibus interdum. In varius pretium dui eget posuere. Nulla quis porttitor diam. Vivamus eget leo magna. Nam scelerisque imperdiet diam laoreet molestie. Proin sollicitudin libero eu diam dignissim ullamcorper. Vestibulum dignissim tristique libero sit amet eleifend. Proin venenatis turpis eu ipsum commodo, adipiscing hendrerit erat fringilla.
  10.  
  11.     Fusce id molestie nunc. Etiam vestibulum fermentum nulla, id facilisis justo lacinia sit amet. Pellentesque dictum consectetur tortor, at blandit ante pretium eget. Sed vulputate accumsan quam quis aliquam. Fusce sagittis, lacus id sagittis sollicitudin, tortor mauris tincidunt nunc, dignissim volutpat dui tortor et elit. Fusce sagittis massa turpis, vel blandit lectus scelerisque eget. Nam quis condimentum purus. Sed egestas dapibus massa sed cursus. Morbi in convallis erat. Nullam semper neque non velit rutrum dapibus. In facilisis hendrerit lacinia.
  12.  
  13.     Donec ipsum odio, dapibus ut ante eu, volutpat dignissim dolor. Phasellus fermentum, sapien fringilla viverra iaculis, ligula mi cursus dolor, sed aliquam eros magna ac magna. Morbi et libero in diam rutrum lobortis sed nec eros. In sit amet mi adipiscing, scelerisque elit vel, vulputate magna. Proin congue gravida commodo. Pellentesque placerat ullamcorper odio, vel varius urna interdum eget. Ut eu lobortis mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
  14.  
  15.     Pellentesque nec risus metus. Maecenas mollis urna et erat dignissim ultricies. Pellentesque posuere fermentum condimentum. Praesent tempus, felis in aliquam molestie, quam enim faucibus elit, ut tincidunt turpis arcu commodo orci. Aenean et blandit ipsum. Mauris lobortis massa ultrices adipiscing vehicula. In eu felis sagittis, convallis justo ac, suscipit diam. Sed non pharetra ligula. Suspendisse elementum vel nisl nec tincidunt. Ut adipiscing non quam sit amet tempus. Mauris ultrices metus sit amet condimentum aliquam. Etiam egestas lacus vel leo ornare, eu congue nunc auctor. Quisque imperdiet, massa vel lacinia scelerisque, nunc ipsum faucibus enim, ac convallis diam orci quis nisi. Praesent eu augue ultricies, laoreet risus vel, euismod massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent sed tortor rhoncus, rutrum diam quis, ornare metus.
  16.  
  17.     Maecenas tincidunt bibendum ligula, non eleifend arcu. Nunc vitae fermentum metus. Phasellus vestibulum ac velit quis pretium. Vivamus vitae magna augue. Vestibulum massa mi, placerat a eleifend sit amet, egestas sed leo. Sed dictum nec metus sit amet faucibus. Nulla nulla massa, faucibus condimentum nisl accumsan, ornare semper purus. Etiam id dictum ipsum. Nam nisl dolor, mollis eu convallis in, laoreet sit amet nisl.
  18.  
  19.     Suspendisse adipiscing, dui quis condimentum viverra, eros est vulputate tortor, vel pellentesque nisl tellus sit amet tellus. Donec ac arcu vel mauris aliquet tempor. Proin massa magna, suscipit ut elit fringilla, feugiat laoreet arcu. Praesent feugiat auctor vehicula. Fusce sit amet suscipit nisi. Phasellus ac ipsum tortor. Integer pellentesque augue a laoreet dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at elementum odio. Suspendisse eget nunc augue. Vestibulum a lorem nulla.
  20.  
  21.     Mauris fermentum ligula a quam consectetur, sed accumsan enim adipiscing. Aenean ac ligula in purus facilisis molestie eu non nisi. Sed accumsan convallis orci vitae lacinia. Quisque egestas lorem vel libero blandit, sit amet vehicula ligula accumsan. Duis at gravida justo, et rhoncus felis. Nam aliquam ligula in pellentesque ullamcorper. Pellentesque sit amet ante vitae diam molestie vehicula ut id erat. Nullam ac libero et quam hendrerit malesuada vel et augue. Maecenas non justo est. Etiam quis congue quam. Aliquam ullamcorper quam id ornare pharetra. Donec eget magna tellus.
  22.  
  23.     Ut faucibus, augue sed gravida adipiscing, lorem libero vestibulum ante, id tincidunt arcu sem eu arcu. Proin bibendum a ipsum in aliquet. Fusce ultrices dignissim magna at consectetur. Morbi ut quam pretium, auctor turpis eu, venenatis nisi. Sed sit amet vestibulum est. Maecenas lacinia sagittis justo volutpat faucibus. Ut tellus augue, accumsan non sagittis et, posuere et dolor. Mauris euismod enim non leo fermentum posuere eu eu justo. Nunc sed tellus venenatis urna auctor feugiat. Aenean quis semper leo.
  24.  
  25.     In sagittis nec sapien sed semper. Pellentesque leo mauris, congue eu urna nec, ultrices faucibus orci. Suspendisse in lacinia urna. Nam eu hendrerit mi. Duis facilisis, turpis faucibus lacinia dictum, elit ante gravida quam, ac facilisis neque nulla vitae magna. Duis consectetur leo non augue ullamcorper viverra. Integer dolor arcu, placerat a pretium eu, pulvinar vel magna.
  26.  
  27.     Aenean bibendum enim eget tortor tempus, nec cursus lorem pellentesque. In eget dolor quam. Nullam ut quam felis. Integer nunc augue, suscipit consequat nulla ac, euismod congue dui. Curabitur semper justo sit amet orci dapibus rhoncus. Sed sodales ultricies pretium. Nunc id sem augue. Duis feugiat, augue vitae posuere commodo, arcu velit semper nibh, nec tincidunt tellus ante a quam. Praesent molestie eros quis arcu elementum, quis consequat justo fermentum. Etiam eu molestie odio. Donec fermentum, nisl et aliquet sagittis, nulla ipsum pharetra nulla, in cursus massa nulla ut elit. Proin molestie mauris porta sapien consequat vestibulum. Pellentesque mollis non neque id cursus. Donec tempor rutrum diam, nec imperdiet magna faucibus ut.
  28.  
  29.     Suspendisse potenti. Maecenas eget lorem scelerisque erat fermentum egestas eget non lacus. Integer ultrices dolor sem, non interdum nisl convallis fermentum. Praesent in lacinia nisi, in tincidunt lectus. Duis eu bibendum augue, non aliquam neque. Phasellus eget dapibus neque. Curabitur aliquet mi ut libero rutrum, cursus feugiat sem consectetur. Pellentesque ut malesuada velit, ac tempus diam. Nulla tempor neque posuere purus imperdiet auctor. Phasellus sed vestibulum sem. Praesent in ipsum mi. In eget adipiscing ligula, eget tempor nisl. Ut eleifend fringilla velit vel eleifend. Maecenas in metus nisl. Aliquam adipiscing lacinia enim semper fermentum. Maecenas sed augue fermentum, rhoncus libero interdum, pellentesque massa.
  30.  
  31.     Morbi et mollis libero. Proin at eros ullamcorper, euismod diam vel, porttitor ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ornare tincidunt odio sit amet lacinia. Maecenas mi nulla, volutpat non dui in, cursus dignissim metus. Mauris dignissim magna quis mi fermentum, ultricies cursus erat interdum. Curabitur vel magna ac odio dictum laoreet non vitae dolor. Aenean et lorem pellentesque, commodo tellus ac, porttitor nisl. Sed tempor nisl eget magna placerat dictum. Praesent fringilla felis ut convallis congue. Morbi sit amet lacus ut leo tempus feugiat. Vestibulum vel lacus ac libero porta elementum. Nullam sapien risus, auctor ac bibendum et, iaculis ut sem. Fusce facilisis sagittis sem dapibus malesuada. Pellentesque sit amet vestibulum justo.
  32.  
  33.     Nullam vulputate augue ac augue vestibulum volutpat. Aenean sit amet elementum ante, non feugiat neque. Vivamus ut leo id massa venenatis egestas. Quisque tempor nunc nec tortor commodo suscipit. Morbi gravida est odio, non dignissim dui suscipit ac. Nam interdum volutpat laoreet. Phasellus vitae pretium velit. Pellentesque viverra risus enim, ac suscipit nibh mollis et. Curabitur mollis, odio sed convallis tempus, elit dui elementum erat, vel tempor mi tellus vel justo. Nunc rhoncus consectetur magna a faucibus. Nam malesuada, sapien ut dignissim hendrerit, sapien felis imperdiet orci, nec eleifend lorem nulla quis lectus. Sed blandit elit vel pretium iaculis. Donec tortor nunc, rutrum sed lacus eget, rhoncus condimentum felis.
  34.  
  35.     Nulla pellentesque malesuada justo eget tempor. Curabitur porttitor eros non gravida gravida. Nulla facilisi. Nulla sed congue nisi, imperdiet vehicula elit. Integer aliquam justo sem, at commodo tellus dictum non. Aliquam posuere semper rutrum. Duis et sagittis odio, id auctor diam. Vivamus rhoncus, dolor sit amet molestie aliquet, erat ligula adipiscing lorem, eget aliquet ipsum lacus quis elit. Curabitur id turpis nisl.
  36.  
  37.     Donec pellentesque lorem eget nisi ullamcorper, ac scelerisque lectus dapibus. Fusce rhoncus feugiat tincidunt. Sed suscipit fringilla ligula sit amet gravida. Sed eleifend tortor eget quam volutpat sagittis. Sed pretium erat sed tincidunt malesuada. Vestibulum lobortis urna risus, at ornare ipsum imperdiet eget. Fusce varius facilisis augue, et convallis neque sagittis et. Donec pharetra tempor diam non molestie. Nunc auctor euismod leo. Fusce ullamcorper urna non erat hendrerit tincidunt. Pellentesque metus elit, posuere id varius in, consectetur ac erat.
  38.  
  39.     Fusce luctus nec eros vitae consectetur. Nam vel nisl semper, tincidunt diam facilisis, sodales purus. Donec rutrum sodales est. Nunc vestibulum fringilla augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean congue, odio vitae volutpat accumsan, est eros rhoncus eros, non pretium diam tortor in sapien. Phasellus vel metus at magna pretium imperdiet. Etiam ut lacinia neque, et placerat tortor. In ac est mauris. Pellentesque posuere faucibus leo id laoreet.
  40.  
  41.     Cras vel condimentum metus. Duis pharetra tortor ac quam viverra, at consequat leo congue. Praesent a nisi vulputate, porta eros a, condimentum nibh. Vestibulum tempus nibh non sem posuere, vitae imperdiet felis vestibulum. In euismod congue hendrerit. Sed non nunc eu elit posuere malesuada nec at neque. Maecenas eu arcu nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam consequat ornare leo, nec dictum libero scelerisque ut.
  42.  
  43.     Aliquam vel est nec elit congue congue eget at massa. In euismod varius nulla id euismod. Phasellus bibendum sapien at arcu gravida, in interdum nibh facilisis. Fusce luctus erat vel nulla tempus fermentum. Pellentesque tristique neque nibh, non malesuada sem tempus id. Nulla egestas blandit venenatis. Morbi fringilla elit eu dui luctus, ac euismod tellus accumsan. Curabitur faucibus ipsum eu iaculis vehicula.
  44.  
  45.     Aliquam interdum leo a tincidunt hendrerit. Quisque quis dolor ut massa scelerisque ornare. Mauris quis diam arcu. Fusce adipiscing ligula nisi, vehicula ultricies lacus sodales ac. Sed diam nisl, tristique vel diam nec, congue viverra ligula. Vestibulum vulputate lectus non dignissim semper. Aenean condimentum nunc quis ipsum luctus, vitae consectetur nisi placerat. Nunc enim velit, facilisis dapibus risus vitae, molestie consequat ante. Donec convallis lorem mollis, ornare lectus vitae, hendrerit ante. Phasellus et dolor ipsum. Morbi dui enim, congue nec elementum vitae, tempor et erat. In magna sapien, elementum vitae elementum at, ultricies vel dui. Cras mollis nisl nunc, id molestie tortor suscipit eu. Nam non libero aliquam, laoreet tellus ac, congue libero. Nullam condimentum neque lacinia est faucibus, eu euismod urna facilisis. Sed at laoreet risus.
  46.  
  47.     Donec fringilla sodales justo, nec porta est vulputate id. Duis fermentum fermentum nulla. Integer cursus viverra sagittis. Nulla elementum posuere mi, quis tempor lectus sodales et. Nullam laoreet commodo ipsum, fringilla facilisis tortor scelerisque et. Maecenas sagittis turpis in nunc convallis facilisis. Aliquam erat volutpat. Donec semper imperdiet libero, in consectetur enim porta et.
  48.  
  49.     Pellentesque id lorem iaculis, pretium sem non, euismod dui. Pellentesque dignissim in metus ac adipiscing. Donec vulputate, felis facilisis ullamcorper posuere, sapien felis euismod tortor, vel tristique orci augue et eros. Fusce aliquet facilisis libero, ac varius orci congue vel. Fusce euismod ut magna sagittis feugiat. Vivamus imperdiet adipiscing tellus. Pellentesque pulvinar posuere purus nec dictum. Proin non cursus felis, id semper enim. Vestibulum posuere est ut aliquet varius. Fusce sed mauris et odio imperdiet faucibus quis ac quam. Sed rutrum, leo at suscipit bibendum, orci mi suscipit nunc, id mollis arcu nunc a elit.
  50.  
  51.     In molestie tempus orci porttitor imperdiet. Praesent accumsan, ante pellentesque cursus volutpat, augue odio viverra massa, at congue mauris diam vitae justo. Quisque vehicula interdum risus, hendrerit tempor arcu auctor id. Duis ac arcu congue, aliquam velit eu, tincidunt elit. Duis aliquet tincidunt odio, at imperdiet tortor venenatis ac. Praesent non lorem congue, placerat nunc quis, lobortis nisi. Duis adipiscing luctus sapien, vel venenatis neque sollicitudin id. Sed tincidunt neque arcu, quis volutpat dui ultricies id. Nulla blandit dapibus mi.
  52.  
  53.     Integer varius dolor quis tristique tempor. Pellentesque eget leo a dolor porttitor accumsan. Donec ornare, orci vitae adipiscing egestas, ipsum nunc venenatis massa, id venenatis erat mi nec odio. Suspendisse id eros faucibus, egestas lorem a, facilisis ante. Pellentesque feugiat ullamcorper nisl id luctus. Suspendisse in rutrum justo. Pellentesque id tellus sed lorem accumsan mollis. Nam suscipit vitae neque sed gravida. Suspendisse ullamcorper at lorem ac ultricies. In eu nisi rutrum, tempus quam in, posuere enim. Aliquam lectus est, egestas eget orci a, iaculis sollicitudin mauris. Ut sit amet sem non nisl consectetur consequat a id nisl.
  54.  
  55.     Nam pharetra augue sed enim commodo, fermentum malesuada augue blandit. Aliquam erat volutpat. Praesent non volutpat nisl. Mauris lacus dui, faucibus sollicitudin aliquam eget, feugiat eget lectus. Cras lobortis massa sit amet massa pulvinar vestibulum. Nulla facilisi. Praesent ut erat volutpat quam volutpat vulputate ac sed magna. Etiam justo neque, elementum sed semper et, iaculis ac ipsum. Curabitur commodo turpis nec odio eleifend convallis.
  56.  
  57.     Ut et varius ligula. Pellentesque nunc ipsum, fermentum quis augue vel, consequat eleifend lectus. Aenean eget metus a lorem lobortis commodo vitae ac tortor. Morbi non pharetra libero. Sed libero elit, molestie at fringilla non, convallis adipiscing tortor. Proin nibh enim, lobortis et fermentum eget, tincidunt quis sapien. Ut feugiat nisi nec leo sagittis feugiat. Cras id adipiscing arcu. Suspendisse malesuada dapibus tincidunt.
  58.  
  59.     Curabitur adipiscing risus at enim consectetur, ornare vehicula libero tincidunt. Donec vitae eros eu est posuere tincidunt. Sed commodo ligula orci, sagittis ultrices enim tempus eu. Nulla sed sagittis dui. Aenean pretium, ligula at pretium tempus, velit sapien faucibus est, id bibendum lorem felis a mauris. Aliquam quis euismod nulla. Praesent fringilla quam nec neque laoreet vestibulum.</div>
  60.     <script src="http://code.jquery.com/jquery-git.js"></script>
  61.     <script>
  62.         $("#expandText").click(function() {
  63.             if($(this).text() == "Læs mere") {
  64.                 $(this).text("Skjul tekst");
  65.                 $("#moreText").stop().fadeIn('slow');
  66.             } else {
  67.                 $(this).text("Læs mere");
  68.                 $("#moreText").stop().fadeOut('slow');
  69.             }
  70.         });
  71.     </script>
  72. </body>
  73. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement