Как сделать, чтоб по умолчанию был класс open, а при первом клике блок сворачивался?

Question

Есть функция, которая по идеи должна по умолчанию добавить класс open к главному блоку wrap_bl. А по нажатию на title_bl блок сворачивается, а класс open удаляется. Но оно так почему-то не работает. По умолчанию класс open не добавляется. Он добавляется только по клику на title_bl, а на втором клике он уже начинает сворачивать блок. Подскажите как сделать правильно, то есть, чтоб по умолчанию был класс open, а при первом клике блок сворачивался.

<div class="wrap_bl">
   <div class="hed_title_bl"> 
        <span class="title_bl">Название</span>
   </div>
   <ul class="content_bl">
      <li>
         <a href="#">Название 1</a>
      </li>
      <li>
         <a href="#">Название 2</a>
      </li>
      <li>
         <a href="#">Название 3</a>
      </li>
      <li>
         <a href="#">Название 4</a>
      </li>
      <li>
         <a href="#">Название 5</a>
      </li>
   </ul>
</div>

jQuery(function($) {

    $(document).on('click', '.title_bl', function () {

        var $jot = $(this).parents('.wrap_bl');

        $jot.toggleClass('open');
        if ($jot.hasClass('open')) {
            $('.content_bl').slideDown();
        } else {
            $('.content_bl').slideUp();
        }

    });

});

Answer 1

Два варианта:

При загрузке страницы стриггерить событие $('.title_bl').trigger('click');
Почему бы сразу в html не повесить класс open?

Answer 2

Или задать класс заранее в html:

jQuery(function($) {

  $(document).on('click', '.title_bl', function() {
    var $jot = $(this).parents('.wrap_bl');
    $jot.toggleClass('open');
    if ($jot.hasClass('open')) {
      $('.content_bl').slideDown();
    } else {
      $('.content_bl').slideUp();
    }

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap_bl open">
  <div class="hed_title_bl">
    <span class="title_bl">Название</span>
  </div>
  <ul class="content_bl">
    <li>
      <a href="#">Название 1</a>
    </li>
    <li>
      <a href="#">Название 2</a>
    </li>
    <li>
      <a href="#">Название 3</a>
    </li>
    <li>
      <a href="#">Название 4</a>
    </li>
    <li>
      <a href="#">Название 5</a>
    </li>
  </ul>
</div>

Или присваивать скриптом:

jQuery(function($) {

  $('.wrap_bl').addClass('open');

  $(document).on('click', '.title_bl', function() {
    var $jot = $(this).parents('.wrap_bl');
    $jot.toggleClass('open');
    if ($jot.hasClass('open')) {
      $('.content_bl').slideDown();
    } else {
      $('.content_bl').slideUp();
    }

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap_bl">
  <div class="hed_title_bl">
    <span class="title_bl">Название</span>
  </div>
  <ul class="content_bl">
    <li>
      <a href="#">Название 1</a>
    </li>
    <li>
      <a href="#">Название 2</a>
    </li>
    <li>
      <a href="#">Название 3</a>
    </li>
    <li>
      <a href="#">Название 4</a>
    </li>
    <li>
      <a href="#">Название 5</a>
    </li>
  </ul>
</div>

БЛОГ НА HUSL

Как сделать, чтоб по умолчанию был класс open, а при первом клике блок сворачивался?

Ответы (2 шт):