Want more features on Pastebin? Sign Up, it's FREE!
Guest

le awsome page :) - ababei alexandru

By: a guest on Mar 7th, 2013  |  syntax: HTML 5  |  size: 2.00 KB  |  views: 39  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1.  
  2. <!-- for the sake of the example we put it a little style and we will not use any metas or wtv -->
  3.  
  4. <html>
  5. <head>
  6. <title>Le awesome Title</title>
  7.    
  8.     <!-- this is the style -->
  9.     <style type="text/css">
  10.        
  11.                 html, body { color:#666; font:"Times New Roman", Times, serif; }
  12.         h1 { font-size:36px; color:#333; margin:0 0 15px 0; padding:0 0 15px 0; border-bottom: solid 1px #e1e1e1; }
  13.         .awesomeBox { border:solid 1px #cacaca; box-shadow: 0 0 3px #bbb; padding:15px; margin:20px; width:400px; }
  14.                
  15.                 /* this is all you need to make the hidden box hidden :) */
  16.                 .hiddenBox { display:none; }
  17.                
  18.                 /* we put a little style to the trigger */
  19.                 .box { position:relative; }
  20.                 .box .trigger { font-size:12px; background:#cacaca; padding:5px 10px; color:#fff; text-decoration:none; position:absolute; bottom:-42px; right:0; }
  21.                 .box .hiddenBox { background:#f9f9f9; color:#000; padding:10px; margin:10px; }
  22.                
  23.     </style>
  24.  
  25.     <!-- we need jquery for this, so, we will loading
  26.    it from google, but you can also load it from local -->
  27.  
  28.         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  29.    
  30.     <!-- this is the trigger button part -->
  31.     <script>
  32.                
  33.                 $(function() {
  34.                        
  35.                         $(".trigger").on("click", function() {
  36.                                 $(".hiddenBox").toggle();
  37.                                
  38.                                        
  39.                                        
  40.                         });
  41.                        
  42.                 });
  43.                
  44.     </script>
  45.  
  46. </head>
  47. <body>
  48.  
  49. <div class="awesomeBox">
  50.  
  51. <h1>Le awesome Page</h1>
  52.  
  53.     <div class="box">So this is the box where you could type a lot of text but... you also want to hide an important part so you could surprise them with a sneky picture, or ad :)<br>
  54.    
  55.     <p>So, they will press the read more button.</p> <a href="#" class="trigger">Read more &raquo;</a>
  56.        
  57.         <div class="hiddenBox">
  58.        
  59.         <p>A lot of text in this hidden box and ...</p>
  60.        
  61.         <img src="http://hbfs.files.wordpress.com/2009/05/sneaky-cat.jpg" width="100%" /> </div>
  62.        
  63.     </div>
  64.    
  65. </div>    
  66.  
  67. </body>
  68. </html>
clone this paste RAW Paste Data