API tools faq
paste
Advertisement
framp

Accordion Demo

framp
May 12th, 2012
63
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.69 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>Accordion</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" ></script>
  6.  
  7.  
  8. <style>
  9.     #menu{
  10.         width: 400px;
  11.         list-style-type: none;
  12.         padding:0px;
  13.         margin:0px;
  14.         background: #f5f5f5;
  15.        
  16.     }
  17.     #menu>li{
  18.         position:relative;
  19.         margin-top:5px;
  20.         margin-bottom:5px;
  21.     }
  22.     #menu>li>h3{
  23.         padding:5px;
  24.         margin:0px;
  25.         background-color: #000;
  26.         color: #fff;
  27.     }
  28.     #menu>li>span{
  29.         display:block;
  30.         overflow: hidden;
  31.         margin: 10px;
  32.     }
  33.     #menu>li>.remove{
  34.         position:absolute;
  35.         right:5px;
  36.         top:10px;
  37.         color: #fff;
  38.         text-decoration: none;
  39.         font-size:80%;
  40.     }
  41.    
  42.     #left{
  43.         position:absolute;
  44.         top:10px;
  45.         left:10px;
  46.     }
  47.     #right{
  48.         position:absolute;
  49.         top:10px;
  50.         left: 500px;
  51.     }
  52.     #addForm label{
  53.         position:absolute;
  54.     }
  55.     #addForm>p>input, #addForm>p>textarea{
  56.         margin-left: 70px;
  57.         width:200px;
  58.     }
  59. </style>
  60.  
  61. </head>
  62. <body>
  63. <div id="left">
  64. <ul id="menu">
  65.     <li class="active">
  66.         <h3>You understand?</h3>
  67.    
  68.         <span>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?</span>
  69.     </li>
  70.     <li>   
  71.         <h3>Teletubbies</h3>
  72.    
  73.         <span>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</span>
  74.     </li>
  75.     <li>   
  76.         <h3>Caesar's world</h3>
  77.    
  78.         <span>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Caesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price.</span>
  79.     </li>
  80.    
  81.     <li>   
  82.         <h3>Ice is faster</h3>
  83.    
  84.         <span>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</span>
  85.     </li>
  86. </ul>
  87. </div>
  88. <div id="right">
  89. <button id="cupcake">Add something nice</button>
  90. <hr />
  91.  
  92. <form id="addForm" method="post" action="">
  93.     <p><label for="title">Title</label> <input type="text" name="title" /></p>
  94.     <p><label for="content">Content</label> <textarea name="content"></textarea></p>
  95.     <p><label for="active">Active</label> <input type="checkbox" name="active" /></p>
  96.     <input type="submit" value="Add">
  97. </form>
  98. </div>
  99. <script>
  100.     var accordion = {
  101.         container: $('#menu'),
  102.        
  103.         process: function(li){
  104.             var span = li.children('span'),
  105.                 height = span.height(),
  106.                 _this = this;
  107.             if (!li.hasClass('active'))
  108.                 span.height(0);
  109.            
  110.             li.click(function(){
  111.                 var current = $(this);
  112.                 if (current.hasClass('active'))
  113.                     return;
  114.                
  115.                 var active = _this.container.children('.active');
  116.                 active.children('span').animate({height: '0' });
  117.                 active.removeClass('active');
  118.                    
  119.                 current.children('span').animate({ height: height });
  120.                 current.addClass('active');
  121.             });
  122.             var remove = $('<a href="#" class="remove">X</a>');
  123.             remove.appendTo(li)
  124.                 .click(function(){
  125.                     _this.remove($(this).parent());
  126.                     return false;
  127.                 });
  128.         },
  129.         init: function(){
  130.             var _this = this;
  131.             this.container.children('li').each(function(){
  132.                 _this.process($(this));
  133.             });
  134.         },
  135.         add: function(title, content, active){
  136.             var section = $('<li><h3>' + title + '</h3>' +
  137.                             '<span>' + content + '</span></li>');
  138.             section.appendTo(this.container);
  139.             this.process(section);
  140.             if (active)
  141.                 section.click();
  142.         },
  143.         remove: function(li){
  144.             li.remove();
  145.             if (li.hasClass('active'))
  146.                 this.container.first().click();
  147.         }
  148.     };
  149.    
  150.     accordion.init();
  151.    
  152.     $('#cupcake').click(function(){
  153.         accordion.add('Cupcakes', 'Chocolate lemon drops sweet roll sugar plum croissant soufflé jelly-o jelly. Sweet cookie dragée dessert danish bear claw. Cheesecake macaroon cookie jujubes brownie liquorice tart cupcake. Chocolate cake jelly croissant carrot cake fruitcake topping lollipop. Jelly apple pie danish chocolate bar jelly beans faworki jelly beans bonbon. Cotton candy cheesecake bonbon cheesecake powder gummi bears tootsie roll danish. Powder ice cream carrot cake oat cake apple pie applicake toffee. Brownie ice cream bonbon carrot cake. Caramels wypas powder bear claw brownie powder jelly beans bear claw donut. Icing cotton candy chocolate cupcake candy canes sweet lollipop cheesecake.', true);
  154.         $(this).remove();
  155.     });
  156.    
  157.     $('#addForm').submit(function(){
  158.         var inputs = $(this).find('input, textarea');
  159.        
  160.         accordion.add(inputs.eq(0).val(), inputs.eq(1).val(), inputs.eq(2).is(':checked'));
  161.         return false;
  162.     });
  163.        
  164. </script>
  165. </body>
  166. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!