Untitled

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>document</title>
  <script src="jquery.js"></script>
  <style>
	/*стиль для всего контейнера*/
	.message {
		position: relative;
		width: 500px;
		border: 2px solid black;
		/*padding: 4px;*/
		background: #CCCCCC;

	}

	/*стиль для заголовка сообщения*/
	.messageHead {
		position: relative;
	}
	.textMessage, .messageHead {

		padding: 5px;
	}

	/*Позиционирование заголовка сообщения*/
	.message-title {
		float: left;

	}

	/*стиль который нужен для обоих кнопок.*/
	.close, .active {
		width: 0;
		height: 0px;
		/*отступы до внешней рамки, стили которой указаны в классе boxForActive*/
		margin: 2px;
	}
	/*кнопка вверх*/
	.active {
		border-left: 2.5px solid transparent;
		border-right: 2.5px solid transparent;
		border-bottom: 5px solid black;
	}
	/*кнопка в низ(закрыта)*/
	.close {
		border-left: 2.5px solid transparent;
		border-right: 2.5px solid transparent;
		border-top: 5px solid black;
	}

	/*стиль для контейнера, необходимо задавать именно здесь, чтоб можно было указать рамку.*/
	.boxForActive {
		padding: 3px;
		border: 1px solid black;
		float: right;
		margin-top: 18px;
		margin-left: -15px;
		cursor: pointer;
	}
	/*отмена обтекания для сообщенияю*/
	.textMessage {
		clear: both;
	}
	/*поизционирование для горизонтальной лини*/
	.position {
		position: relative;
		clear: both;
	}

  </style>
 </head>
 <body>
	<div class="message">
		<div class="messageHead">
			<h3 class="message-title">Просто название.</h3>
			<div class="boxForActive"><p class="type active"></p></div>
		</div>
		<div class="coteinerTextMessage">
			<p class="textMessage">Текст сообщение, что-то очень интересно, нужно прочитать, текст с сообщением ла ла ла</p>
		</div>
		<!--div который нужен что сообщение не выпало из контейнера-->
		<div class="position"></div>
	</div>
	<div class="message">
		<div class="messageHead">
			<h3 class="message-title">Веселое название.</h3>
			<div class="boxForActive"><p class="type active"></p></div>
		</div>
		<div class="coteinerTextMessage">
			<p class="textMessage">Текст сообщение, что-то очень интересно, нужно прочитать, текст с сообщением ла ла ла</p>
		</div>
		<!--div который нужен что сообщение не выпало из контейнера-->
		<div class="position"></div>
	</div>
	<div class="message">
		<div class="messageHead">
			<h3 class="message-title">Что -то другое.</h3>
			<div class="boxForActive"><p class="type active"></p></div>
		</div>
		<div class="coteinerTextMessage">
			<p class="textMessage">Текст сообщение, что-то очень интересно, нужно прочитать, текст с сообщением ла ла ла</p>
		</div>
		<!--div который нужен что сообщение не выпало из контейнера-->
		<div class="position"></div>
	</div>

	<script>
		/*с помощью делегирования*/
		$(".message").on("click", function(event) {
			if($(event.target).hasClass(".boxForActive"))
				return false;
			//получение элемента с классом message
			var message = $(event.target).parents(".message");
			//получение элемента с клссом type(определяющий скрыто или нет сообщение).
			var type = $(".type", message);

			//определение теущего и будующего класса, скрыто или нет сообщение.
			var nextTypeMessage = type.hasClass("active") ? "close" : "active";
			var currentTypeMessage = nextTypeMessage == "active" ? "close" : "active";

			//удаление типа класса который указан на данный момент.
			type.removeClass( currentTypeMessage );

			//добавление класса active / close
			type.addClass(nextTypeMessage);

			//срытие и раскрытие сообщения
			$(".textMessage", message).slideToggle();

		});
	</script>

 </body>


</html>