Skip to content

Instantly share code, notes, and snippets.

@duroe5698

duroe5698/simple-lightweight-jquery-accordion.css

Created November 25, 2015 17:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save duroe5698/1e99c99895d16b43bac0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save duroe5698/1e99c99895d16b43bac0 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Lightweight jQuery Accordion for WordPress
Raw
simple-lightweight-jquery-accordion.css
/* --------------------------------------------
Accordion Styles
----------------------------------------------*/
.accordion { margin: 0 0 30px; border-top: 1px solid #DDD; border-right: 1px solid #DDD; border-left: 1px solid #DDD; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.accordion dt { border-bottom: 1px solid #DDD; }
.accordion dd { display: none; padding: 20px; border-bottom: 1px solid #DDD; }
.accordion dt { cursor: pointer; padding: 8px 15px; margin: 0; }
.accordion dt:before { content: "\25B6"; padding-right: 5px; }
.accordion dt.accordion-active:before { content: "\25BE"; padding-right: 5px; }
.accordion dt.accordion-active:hover { cursor: default; }
Raw
simple-lightweight-jquery-accordion.html
<html>
<h2>Accordion 1</h2>
<dl class="accordion">
<dt>Panel 1</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt>Panel 2</dt>
<dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>
<dt>Panel 3</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>
</dl>
<h2>Accordion 2</h2>
<dl class="accordion">
<dt>Panel 1</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt>Panel 2</dt>
<dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>
<dt>Panel 3</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>
</dl>
</html>
Raw
simple-lightweight-jquery-accordion.js
/**
* Light Weight jQuery Accordions
*/
jQuery(function($) {
//Hide all panels
var allPanels = $('.accordion > dd').hide();
//Show first panel
$('.accordion > dd:first-of-type').show();
//Add active class to first panel
$('.accordion > dt:first-of-type').addClass('accordion-active');
//Handle click function
jQuery('.accordion > dt').on('click', function() {
//this clicked panel
$this = $(this);
//the target panel content
$target = $this.next();
//Only toggle non-displayed
if(!$this.hasClass('accordion-active')){
//slide up any open panels and remove active class
$this.parent().children('dd').slideUp();
//remove any active class
jQuery('.accordion > dt').removeClass('accordion-active');
//add active class
$this.addClass('accordion-active');
//slide down target panel
$target.addClass('active').slideDown();
}
return false;
});
});
Raw
simple-lightweight-jquery-accordion.php
<?php
//* Enqueue Scripts
add_action( 'wp_enqueue_scripts', 'md_load_scripts' );
function md_load_scripts() {
wp_enqueue_script( 'md-global-js', get_bloginfo( 'stylesheet_directory' ) . '/js/global.js', array( 'jquery' ), '1.0.0' );
}
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment