Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- for the sake of the example we put it a little style and we will not use any metas or wtv -->
- <html>
- <head>
- <title>Le awesome Title</title>
- <!-- this is the style -->
- <style type="text/css">
- html, body { color:#666; font:"Times New Roman", Times, serif; }
- h1 { font-size:36px; color:#333; margin:0 0 15px 0; padding:0 0 15px 0; border-bottom: solid 1px #e1e1e1; }
- .awesomeBox { border:solid 1px #cacaca; box-shadow: 0 0 3px #bbb; padding:15px; margin:20px; width:400px; }
- /* this is all you need to make the hidden box hidden :) */
- .hiddenBox { display:none; }
- /* we put a little style to the trigger */
- .box { position:relative; }
- .box .trigger { font-size:12px; background:#cacaca; padding:5px 10px; color:#fff; text-decoration:none; position:absolute; bottom:-42px; right:0; }
- .box .hiddenBox { background:#f9f9f9; color:#000; padding:10px; margin:10px; }
- </style>
- <!-- we need jquery for this, so, we will loading
- it from google, but you can also load it from local -->
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- <!-- this is the trigger button part -->
- <script>
- $(function() {
- $(".trigger").on("click", function() {
- $(".hiddenBox").toggle();
- });
- });
- </script>
- </head>
- <body>
- <div class="awesomeBox">
- <h1>Le awesome Page</h1>
- <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>
- <p>So, they will press the read more button.</p> <a href="#" class="trigger">Read more »</a>
- <div class="hiddenBox">
- <p>A lot of text in this hidden box and ...</p>
- <img src="http://hbfs.files.wordpress.com/2009/05/sneaky-cat.jpg" width="100%" /> </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement