Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <ul class = "accordion" >
    <li>
​
      <h3>Menu Category</h3>
      <ul class = "accordion_detail" >
​
        <li>
          
          <div>
              
              <h4>Menu Item</h4> 
              
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. 
            </p>
            
          </div>    
          
          <span class = "item_detail" >R 10</span> 
          
        </li>
        
         <li>
          
          <div>
              
              <h4>Menu Item 2</h4> 
              
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. 
            </p>
            
          </div>    
          
          <span class = "item_detail" >R 15</span> 
          
        </li>
        
        
      </ul>
      
    </li>
    
    <li>
​
      <h3>Menu Category 2</h3>
      <ul class = "accordion_detail" >
​
        <li>
          
          <div>
              
              <h4>Menu Item 3</h4> 
              
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. 
            </p>
            
          </div>    
          
          <span class = "item_detail" >R 15</span> 
          
        </li>
        
      </ul>
      
    </li>
    
    <li>
​
      <h3>Menu Category 3</h3>
      <ul class = "accordion_detail" >
​
        <li>
          
          <div>
              
              <h4>Menu Item 4</h4> 
              
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. 
            </p>
            
          </div>    
          
          <span class = "item_detail" >R 20</span> 
          
        </li>
        
         <li>
          
          <div>
              
              <h4>Menu Item 5</h4> 
              
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. 
            </p>
            
          </div>    
          
          <span class = "item_detail" >R 5</span> 
          
        </li>
        
        
      </ul>
      
    </li>
​
  </ul>
  
</body>
</html>
​
 
/*! Accordion - v0.1.0 - 2012-08-13
* Copyright (c) 2012 Nic da Costa; Licensed MIT, GPL */
​
(function( $ ) {
    'use strict';
​
  $.fn.accordion = function( $options ) {
​
    // Extend Options with Default instances
    $options = $.extend({}, $.fn.accordion.options, $options);
​
    var $this = $( this );
 
    //Initialise event delegation
​
    $this.on( 'click' , $options.accordionHeader , function( e ) {
​
    
      var $accordionDetail = $( this ).parent( 'li' ).children( $options.childrenSelector );
​
          if ( ! $accordionDetail.hasClass( 'visible' ) ) {
            
            $accordionDetail.addClass( 'visible' ).slideDown();
​
          }
​
          else {
            
            $accordionDetail.removeClass( 'visible' ).slideUp();
​
            }
​
      });
​
  };
​
 $.fn.accordion.options = {
  
    openByDefault : false,
    accordionHeader : 'h3',
    childrenSelector : '.accordion_detail'
​
  };
​
​
}( jQuery ));
​
// Initialise Accordion
$('.accordion').accordion();
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
nic_daCostapro
0viewers