Как реализовать button?

Question

[fenucss]

Здравствуйте. Есть код:

* {
	margin: 0;
	padding: 0
	}
.post {
	padding: 10px 20px;
	position: relative;
	background: #eee;
	margin-bottom: 20px;
	border: 1px solid #CCCCCC;
	}
.inactive {
	color: #bbb;
	}
.post .title {
	position: relative;
	height: 1%;
	}
.post .title h3 {
	font-size: 1.4em;
	}
.post .title h3 a {
	text-decoration: none;
	color: #000;
	}
.inactive .title h3 a {
	color: #bbb;
	}
.post .title p {
	font-size: 11px;
	font-style: italic;
	font-weight: bold;
	margin: 0;
	}
.post .title span {
	position: absolute;
	right: 0;
	top: 30%;
	cursor: pointer;
	width: 14px;
	height: 14px;
	background: url(trigger.gif) no-repeat left bottom;
	display: block;
	font-size: 0;
	}
#content .inactive .title span {
	background-position: left top;
	}
#content .post .entry {
	padding: 10px 0;
	}

$(document).ready(function() {
	$('.title').append('<span></span>');
	$('.post span').each(function() {
		var trigger = $(this), state = false, el = trigger.parent().next('.entry');
		trigger.click(function(){
			state = !state;
			el.slideToggle();
			trigger.parent().parent().toggleClass('inactive');
		});
	});
});

<div id="content">
	<div class="post">
		<div class="title">
			<h3>Заголовок сворачиваемого блока</h3>
		</div>
		<div class="entry" style="display:none;">
			<p>текст свернутого блока</p>
		</div>
	</div>
       <div class="post">
		<div class="title">
			<h3>Заголовок сворачиваемого блока</h3>
		</div>
		<div class="entry" style="display:none;">
			<p>текст свернутого блока</p>
		</div>
	</div>
</div>

Подскажите пожалуйста как к данному коду добавить кнопки - "свернуть все" и "развернуть все", которые бы сворачивали сразу все блоки, а не по отдельности?

Answer 1

[Stalker_RED]

$('#show').on('click', function(){
    $('.post')
      .addClass('inactive')
      .find('.entry').slideDown()
  })
  $('#hide').on('click', function(){
    $('.post')
      .removeClass('inactive')
      .find('.entry').slideUp()
  })

https://jsfiddle.net/75h5dw3h/

Comments

[fenucss]

Если все сделать с "+" и "-" при раскрытии всех блоков вместо "-" повляется "+", а при закрытии всех блоков остается "-"