LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Simple accordion

Requirements - jQuery 1.8+

  • Open me

    Toggle

    Morbi lectus ligula, tempor ac euismod sit amet, vehicula et justo. Curabitur rutrum sodales felis sed faucibus. Nunc condimentum malesuada magna. Vivamus diam lorem, faucibus sodales elementum sed, vehicula eget quam. Integer eget molestie turpis, eu laoreet sem. Nam tincidunt, tellus eu efficitur tincidunt, sapien risus ultricies mauris, lobortis pretium arcu tortor nec nisl. Donec lobortis sed libero vel dignissim. Nam lacinia dui at tortor fermentum aliquet. Nulla consequat eu tortor vel congue. Sed turpis ex, feugiat nec felis dictum, vestibulum commodo eros. Praesent lobortis laoreet tortor a fringilla. Sed metus leo, molestie nec facilisis id, facilisis et eros.

  • Open me

    Toggle

    Morbi lectus ligula, tempor ac euismod sit amet, vehicula et justo. Curabitur rutrum sodales felis sed faucibus. Nunc condimentum malesuada magna. Vivamus diam lorem, faucibus sodales elementum sed, vehicula eget quam. Integer eget molestie turpis, eu laoreet sem. Nam tincidunt, tellus eu efficitur tincidunt, sapien risus ultricies mauris, lobortis pretium arcu tortor nec nisl. Donec lobortis sed libero vel dignissim. Nam lacinia dui at tortor fermentum aliquet. Nulla consequat eu tortor vel congue. Sed turpis ex, feugiat nec felis dictum, vestibulum commodo eros. Praesent lobortis laoreet tortor a fringilla. Sed metus leo, molestie nec facilisis id, facilisis et eros.

CSS
body {
  background: #efefef;
  text-align: center;
}

h1 {
  margin: 2em 0 1em;
}

#accordion {
  text-align: left;
  margin-top: 2em;
}
#accordion li {
  display: block;
  width: 99%;
}
#accordion li h2 {
  display: inline-block;
  width: 90%;
}
#accordion li .header {
  position: relative;
  background: #f8f8f8;
  padding: 0 1em;
  border-bottom: 1px solid #ccc;
}
#accordion li .header .toggle {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 10px;
  right: 1em;
  height: 40px;
  width: 40px;
  text-indent: -9999px;
  background: #ccc;
}
#accordion li .acc-content {
  display: none;
  padding: 0 1em;
}
JS
// Accordion
var accordions = function(){
      var accordion = $('#accordion');

      accordion.on('click','.toggle',function(){
          $(this).parent('.header').next().slideToggle('fast');
          $(this).toggleClass('active');
          return false;
      });
  };

$(function() {
    accordions();
});
Term
Wed, 12/27/2017 - 06:57

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv