Как сделать чтобы, когда активный один блок, закрывались другие блоки?

Question

[FALL4G]

У меня работает открытие и закрытие отдельных блоков, ну как закрывать все блоки если у них нет класса в переменной active?
Я хочу оставлять только тот что открыли, а остальные закрывать.
Ели сделал вот такое:

<script>
    $(document).ready(function () {
        $('.alert_message').click(function (e) {
            e.preventDefault();
            var idElement = this.id, // id кнопки 
                link = 'a#'+idElement, // id кнопки для изминения текста
                active = 'active_blok_settings', // класс активного блока (для главного)
                showBlok = '#'+idElement+'_blok', // блок который нужно показать
                mainBlok = '#main_'+idElement+'_blok'; // id главного блока
            if ($(showBlok).css('display') == 'none') { 
                $(showBlok).animate({height: 'show'}, 0);
                $(link).text('Отмена');
                $(mainBlok).toggleClass(active); 
            } 
            else {
                $(showBlok).animate({height: 'hide'}, 0);
                $(link).text('Изменить');
                $(mainBlok).removeClass(active);
                $('form'+showBlok).trigger("reset"); 
            }
        });
    });
</script>

<div id="main_user_settings_blok" class="blok_settings">
      <div class="style_blok_settings_info">
            <div class="left_settings"><p class="gray">Логин пользователя</p></div>
            <div class="center_settings"><p class="blek">Login</p></div>
            <div class="right_settings"><a class="span_a alert_message" id="user_settings" href="" >Изменить</a></div>
      </div>
      <form id="user_settings_blok" class="settings_blok_style" action="" method="POST" style="display: none;">
            <div class="left_settings"><p class="gray">Новый логин</p></div>
            <div class="center_settings">
                 <input type="text">
            </div>
            <div class="center_settings_66">
                 <button>Cохранить логин</button>
            </div>
      </form>
</div>

Answer 1

[aarty20]

попробуйте вот так, скрыть все объекты и после этого показать нужный:

$('.alert_message').on('click', function() {
      if ($(item).hasClass('show')) {
          $(showBlok).removeClass('show')
      } else {
           $(' %all_elements% ').removeClass('show'); // скрываем все объекты
           $(showBlok).addClass('show'); // показывает тот который нужно
      }
   });

Answer 2

[akzhan]

<a class="opener" href="javascript:;">open</a>
<div class="block">
   ...
</div>
<a class="opener" href="javascript:;">open</a>
<div class="block">
   ...
</div>
<a class="opener" href="javascript:;">open</a>
<div class="block">
   ...
</div>
<a class="opener" href="javascript:;">open</a>
<div class="block">
   ...
</div>

var $blocks = $('.block'); // все блоки имеют класс block и перед ним элемент .opener для раскрытия.
$('.opener').on('click', function(e) {
  e.preventDefault();
  var $nextBlock = $(this).next('.block');
  $blocks.not($nextBlock).hide();
  $nextBlock.show();
});