Toggle content

by csornmo

HTML

<button aria-expanded="false">One</button>
<button aria-expanded="false">Two</button>
<button aria-expanded="false">Three</button>

<div class="content">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad minima repudiandae ut reiciendis ab assumenda ratione, reprehenderit alias. Sequi eum, voluptas commodi accusantium, iusto minus nam quisquam. Vitae, voluptates.
</div>

CSS

* {
	font-family: verdana;
}

button {
	background: #277e4a;
	color: #fff;
	font-size: 16px;
	padding: 10px 15px;
	border-radius: 3px;
	margin-right: 5px;
	font-weight: 400;
	border: 2px solid transparent;
	box-shadow: none;
	margin-bottom: 15px;
	cursor: pointer;
}
button.active {
	border: 2px solid #333;
	background: #0e7839;
}

.content {
	background: #f9f9f9;
	border: 1px solid #777;
	padding: 20px;
	border-radius: 5px;
	display: none;
}

JavaScript

$('button').click(function() {

    $(this).toggleClass('active').siblings().removeClass('active');

    $(this).attr('aria-expanded', function(i, attr) {
        return attr == 'true' ? 'false' : 'true'
    }).siblings().attr('aria-expanded', false);

    if ( $('button').hasClass('active')) {
        $('.content').slideDown();
    } else {
		$('.content').slideUp();
	}


});