Last active
          January 23, 2017 12:00 
        
      - 
      
- 
        Save SiGaCode/817bec7a643b5acbf1c4f9fce014044e to your computer and use it in GitHub Desktop. 
    Another simple jQuery accordion. Responsive, very basic styles, should inherit a lot of Dynamik CSS. Edit to meet your needs.
  
        
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
  | jQuery(document).ready(function($) { | |
| $(".accordion h3").click(function() { | |
| // For active header definition | |
| $('.accordion h3').removeClass('active'); | |
| $(this).addClass('active'); | |
| // Accordion actions | |
| if($(this).next("div").is(":visible")){ | |
| $(this).next("div").slideUp(400); | |
| $(this).removeClass('active'); | |
| } else { | |
| $(".accordion .accordioncontent").slideUp(400); | |
| $(this).next("div").slideToggle(400); | |
| } | |
| }); | |
| }); | 
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
  | // Shortest possible version if you want all the panels stay open until you click them again - no active class though | |
| jQuery(document).ready(function($) { | |
| $('.accordion h3').click(function() { | |
| $(this).next().slideToggle('slow'); | |
| }) | |
| }); | 
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
  | <section class="accordion"> | |
| <h3>Header 1</h3> | |
| <div class="accordioncontent"><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p></div> | |
| <h3>Header 2</h3> | |
| <div class="accordioncontent"><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p></div> | |
| <h3>Header 3</h3> | |
| <div class="accordioncontent"><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p></div> | |
| </section> | 
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
  | .accordion h3 { | |
| box-sizing: border-box; | |
| cursor:pointer; | |
| padding: 5px; | |
| margin:0; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| } | |
| .accordioncontent { | |
| display: none; | |
| color:inherit; | |
| box-sizing: border-box; | |
| } | |
| .accordion h3:after { | |
| content: '\002B'; | |
| color: #000; | |
| font-weight: bold; | |
| float: right; | |
| margin: 0 5px; | |
| } | |
| .accordion h3.active { | |
| background: #f5f5f5; | |
| } | |
| .accordion h3.active:after { | |
| content: "\2212"; | |
| } | 
  
    Sign up for free
    to join this conversation on GitHub.
    Already have an account?
    Sign in to comment