js-drop

by Vladislav Altyncev

HTML

<div class="news_anons_wrap">
	
  <div class="js-drop">
    <p><a class="js-drop__toggler" href="#">Заголовок</a></p>
    <div class="js-drop__content no-display">
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
    </div>
  </div>

	<div class="js-drop">
    <p><a class="js-drop__toggler" href="#">Заголовок</a></p>
    <div class="js-drop__content no-display">
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
    </div>
  </div>

	<div class="js-drop">
    <p><a class="js-drop__toggler" href="#">Заголовок</a></p>
    <div class="js-drop__content no-display">
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
      <p>раскрытие новости</p>
    </div>
  </div>

</div>

CSS

.news_item {
    width: 218px;
}
.no-display {
    display: none;
}

JavaScript

(function($) {
    $.fn.openCloseBlocks = function(blocks, options) {
        var defaults = { 
            speed: 'normal'
        }, 
        opts         = $.extend(defaults, options),
        togglers     = $(this),
        bls          = $(blocks); if(!bls) return;

          togglers.each(function(index) {
              $(this).click(function(e) {
                  e.preventDefault();             
                  $(bls[index]).slideToggle(opts['speed']);
                  $(this).toggleClass('active');
              });
          });
    };
})(jQuery);

$('.js-drop__toggler').openCloseBlocks($('.js-drop__content'), {
    speed: 'fast'
});

$(document).bind('click', function(e){
	if (! $(e.target).parents().hasClass("js-drop")) $(".js-drop__content").hide();
});