Press "Enter" to skip to content

jQuery Accordion Plugin To Show and Hide Elements | BeefUp

BeefUp is a lightweight and responsive jQuery accordion plugin that allows you to toggle the visibility of HTML elements.

plus minus expand collapse html, jquery accessible accordion, jquery accordion with plus minus, jquery hierarchical accordion tree, jquery responsive accordion

Features:

  • Multiple accordions on one page.
  • Can reach.
  • Switch HTML elements via JS or CSS.
  • Multilevel accordion with nested HTML elements.
  • Fade out animation or slides.
  • Callback support.

How to make use of it:

1. Include the newest model of the jQuery library and the jQuery beefup plugin on the bottom of the doc.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="jquery.beefup.js"></script>

2. Create an easy accordion with a plain Html structure.

<article class="demo">
  <h2 class="beefup-head">Accordion Header</h2>
  <div class="beefup-body">
    <p>Accordion Body</p>
  </div>
</article>

3. Call the plugin with default choices.

$('.demo').beefup();

4. Style the accordion whatever you need.

.beefup-head {
  cursor: pointer;
  position: relative;
}

.beefup-head:after {
  border-style: solid;
  border-width: 12px 12px 0 12px;
  border-color: #ddd transparent transparent transparent;
  content: '';
  position: absolute;
  right: 0;
  height: 0;
  margin-top: -6px;
  top: 50%;
  width: 0;
}

.open > .beefup-head:after {
  border-width: 0 12px 12px 12px;
  border-color: transparent transparent #ddd transparent;
}

5. Available choices and defaults.

$('.demo').beefup({

  // Boolean: Enable accessibility features like tab control
  accessibility: true,

  // String: Name of the trigger element
  trigger: '.beefup__head',   

  // String: Name of the collapsible content
  content: '.beefup__body',   

  // String: Name of the class which shows if a accordion is triggered or not
  openClass: 'is-open',       

  // String: Set animation type to "slide", "fade" or leave empty ""
  animation: 'slide',         

  // Integer: Set the speed of the open animation
  openSpeed: 200,             

  // Integer: Set the speed of the close animation
  closeSpeed: 200,      

  // Boolean: Scroll to accordion
  scroll: false,        

  // Integer: Set the speed of the scroll feature
  scrollSpeed: 400,     

  // Integer: Additional offset to accordion position
  scrollOffset: 0,      

  // Boolean: Open just one accordion at once
  openSingle: false,      

  // Mixed: Leave one item open, accepts null, integer or string
  stayOpen: null,             

  // Boolean: Close on click outside
  selfClose: false,   

  // Boolean: Block close event on click        
  selfBlock: false,               

  // Boolean: Open accordion with id on hash change
  hash: true,     

  // Mixed: Null or array of objects       
  breakpoints: null
               
});

6. Callback features.

$('.demo').beefup({

  onInit: function() {}, 
  onOpen: function() {},
  onClose: function() {},
  onScroll: function() {}

});

Lightweight jQuery Accordion Plugin To Show and Hide Elements, BeefUp Plugin/Github, jquery expand collapse div plus minus, simple accessible accordion


See Demo And Download

Official Website(Schascha): Click Here

This superior jQuery/javascript plugin is developed by Schascha. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *