runeh/jsbin.rasib.css

## jsbin.rasib.css
details {
  border: solid thin black;
  border-radius: 4px;
}

details[open] summary {
  border-bottom: solid thin black;
}

## jsbin.rasib.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Accordion</title>
</head>
<body>
  <details open data-group="accordion">
    <summary>Section 1</summary>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Integer et laoreet nisi. Quisque vitae aliquet nisl, nec
        tristique sem. Donec sed justo nisl. Curabitur sed auctor
        elit. Sed eu vulputate sapien, et tristique enim. Maecenas
        venenatis ante vitae sapien bibendum, vitae condimentum
        risus bibendum. Morbi rhoncus porta justo, eget consequat
        eros semper ac. Quisque euismod elit commodo hendrerit
        ullamcorper. Nulla et pharetra risus. Duis vitae mollis
        justo, congue porta magna. Suspendisse potenti.
    </div>
  </details>
  <details data-group="accordion">
    <summary>Section 2</summary>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Integer et laoreet nisi. Quisque vitae aliquet nisl, nec
        tristique sem. Donec sed justo nisl. Curabitur sed auctor
        elit. Sed eu vulputate sapien, et tristique enim. Maecenas
        venenatis ante vitae sapien bibendum, vitae condimentum
        risus bibendum. Morbi rhoncus porta justo, eget consequat
        eros semper ac. Quisque euismod elit commodo hendrerit
        ullamcorper. Nulla et pharetra risus. Duis vitae mollis
        justo, congue porta magna. Suspendisse potenti.
    </div>
  </details>
  <details data-group="accordion">
    <summary>Section 3</summary>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Integer et laoreet nisi. Quisque vitae aliquet nisl, nec
        tristique sem. Donec sed justo nisl. Curabitur sed auctor
        elit. Sed eu vulputate sapien, et tristique enim. Maecenas
        venenatis ante vitae sapien bibendum, vitae condimentum
        risus bibendum. Morbi rhoncus porta justo, eget consequat
        eros semper ac. Quisque euismod elit commodo hendrerit
        ullamcorper. Nulla et pharetra risus. Duis vitae mollis
        justo, congue porta magna. Suspendisse potenti.
    </div>
  </details>
  <details data-group="accordion">
    <summary>Section 4</summary>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Integer et laoreet nisi. Quisque vitae aliquet nisl, nec
        tristique sem. Donec sed justo nisl. Curabitur sed auctor
        elit. Sed eu vulputate sapien, et tristique enim. Maecenas
        venenatis ante vitae sapien bibendum, vitae condimentum
        risus bibendum. Morbi rhoncus porta justo, eget consequat
        eros semper ac. Quisque euismod elit commodo hendrerit
        ullamcorper. Nulla et pharetra risus. Duis vitae mollis
        justo, congue porta magna. Suspendisse potenti.
    </div>
  </details>

</body>
</html>

## jsbin.rasib.js
window.addEventListener('load', function() {
  window.aGroup = new AccordionGroup('accordion');
});

function AccordionGroup(name) {
  this.groupName = name;
  this.init();
}

AccordionGroup.prototype = {
  init: function() {
    var handler = this.toggle.bind(this);
    this.getDetails().forEach(function(e) {
      e.addEventListener('click', handler);
    }, this);
  },

  toggle: function(evt) {
    this.getDetails().
    filter(function(e) {
      return e != evt.target && e.open;
    }).
    forEach(function(e) {
      e.open = false;
    });
  },

  getDetails: function() {
    var selector = 'details[data-group="' + this.groupName + '"]';
    return Array.prototype.slice.call(document.querySelectorAll(selector));
  }
};
	details {
	border: solid thin black;
	border-radius: 4px;
	}

	details[open] summary {
	border-bottom: solid thin black;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Accordion</title>
	</head>
	<body>
	<details open data-group="accordion">
	<summary>Section 1</summary>
	<div>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Integer et laoreet nisi. Quisque vitae aliquet nisl, nec
	tristique sem. Donec sed justo nisl. Curabitur sed auctor
	elit. Sed eu vulputate sapien, et tristique enim. Maecenas
	venenatis ante vitae sapien bibendum, vitae condimentum
	risus bibendum. Morbi rhoncus porta justo, eget consequat
	eros semper ac. Quisque euismod elit commodo hendrerit
	ullamcorper. Nulla et pharetra risus. Duis vitae mollis
	justo, congue porta magna. Suspendisse potenti.
	</div>
	</details>
	<details data-group="accordion">
	<summary>Section 2</summary>
	<div>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Integer et laoreet nisi. Quisque vitae aliquet nisl, nec
	tristique sem. Donec sed justo nisl. Curabitur sed auctor
	elit. Sed eu vulputate sapien, et tristique enim. Maecenas
	venenatis ante vitae sapien bibendum, vitae condimentum
	risus bibendum. Morbi rhoncus porta justo, eget consequat
	eros semper ac. Quisque euismod elit commodo hendrerit
	ullamcorper. Nulla et pharetra risus. Duis vitae mollis
	justo, congue porta magna. Suspendisse potenti.
	</div>
	</details>
	<details data-group="accordion">
	<summary>Section 3</summary>
	<div>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Integer et laoreet nisi. Quisque vitae aliquet nisl, nec
	tristique sem. Donec sed justo nisl. Curabitur sed auctor
	elit. Sed eu vulputate sapien, et tristique enim. Maecenas
	venenatis ante vitae sapien bibendum, vitae condimentum
	risus bibendum. Morbi rhoncus porta justo, eget consequat
	eros semper ac. Quisque euismod elit commodo hendrerit
	ullamcorper. Nulla et pharetra risus. Duis vitae mollis
	justo, congue porta magna. Suspendisse potenti.
	</div>
	</details>
	<details data-group="accordion">
	<summary>Section 4</summary>
	<div>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Integer et laoreet nisi. Quisque vitae aliquet nisl, nec
	tristique sem. Donec sed justo nisl. Curabitur sed auctor
	elit. Sed eu vulputate sapien, et tristique enim. Maecenas
	venenatis ante vitae sapien bibendum, vitae condimentum
	risus bibendum. Morbi rhoncus porta justo, eget consequat
	eros semper ac. Quisque euismod elit commodo hendrerit
	ullamcorper. Nulla et pharetra risus. Duis vitae mollis
	justo, congue porta magna. Suspendisse potenti.
	</div>
	</details>

	</body>
	</html>
	window.addEventListener('load', function() {
	window.aGroup = new AccordionGroup('accordion');
	});

	function AccordionGroup(name) {
	this.groupName = name;
	this.init();
	}

	AccordionGroup.prototype = {
	init: function() {
	var handler = this.toggle.bind(this);
	this.getDetails().forEach(function(e) {
	e.addEventListener('click', handler);
	}, this);
	},

	toggle: function(evt) {
	this.getDetails().
	filter(function(e) {
	return e != evt.target && e.open;
	}).
	forEach(function(e) {
	e.open = false;
	});
	},

	getDetails: function() {
	var selector = 'details[data-group="' + this.groupName + '"]';
	return Array.prototype.slice.call(document.querySelectorAll(selector));
	}
	};