<div class="block">
 <div class="title">
   <h1>вкладка1</h1>
   <div class="bcr"></div>
</div>

<div class="texttoggle">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta mollitia voluptatum tempora, praesentium dolores quisquam ut fugiat consequuntur accusamus deleniti! Nesciunt natus nulla error eos velit quibusdam quaerat obcaecati hic.
</p>
</div>

</div>


<div class="block">
   <div class="title">
   <h1>вкладка2</h1>
<div class="bcr"></div>
</div>

<div class="texttoggle">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta mollitia voluptatum tempora, praesentium dolores quisquam ut fugiat consequuntur accusamus deleniti! Nesciunt natus nulla error eos velit quibusdam quaerat obcaecati hic.
</p>
</div>

</div>


<div class="block">
   <div class="title">
   <h1>вкладка3</h1>
<div class="bcr"></div>
</div>

<div class="texttoggle">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta mollitia voluptatum tempora, praesentium dolores quisquam ut fugiat consequuntur accusamus deleniti! Nesciunt natus nulla error eos velit quibusdam quaerat obcaecati hic.
</p>
</div>

</div>
.texttoggle{
  display: none;
}

.bcr{
	background: red;
	width: 20px;
	height: 20px;
}

.open{
background: blue;
}
$('.title').on('click', function () {
$(document).find($('.texttoggle')).css({'display' : 'none'});
  $(document).find($('.bcr')).removeClass('open');
$(this).next($('.texttoggle')).fadeToggle('slow');
  $(this).find('.bcr').toggleClass('open');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js