Как при клике на кнопку изменить класс другого элемента и текст самой кнопки?

Question

[termit84]

Добрый день, помогите немного модифицировать решение которое я нашел.

Нужно вместо изменения STYLE чтобы у контейнера добавлялся/удалялся класс, например ACTIVE

<button class="js-button" data-toggle-text="Close">Open</button>
<div class="js-container hidden">
Some text here.
</div>
		
<script>
;(function($D){
    var $button    = $D.querySelector('.js-button'),
        $container = $D.querySelector('.js-container');
  
    $button.addEventListener('click', function(e){
      var data = e.target.dataset,
          toggleText = $button.innerHTML,
          isVisible = $container.style.display == 'block';
      
      $button.innerHTML = data.toggleText;
      data.toggleText = toggleText;
      
      $container.style.display = isVisible ? 'none' : 'block';
    });
})(document);
</script>

Comments

[Леонид Князев]

А, где тут Jquery ?

[termit84]

Леонид Князев, поправил вопрос

Answer 1

[Кирюшка Цисарь]

;(function($D){
    var $button    = $D.querySelector('.js-button'),
        $container = $D.querySelector('.js-container');
  
    $button.addEventListener('click', function(e){
      var data = e.target.dataset,
          toggleText = $button.innerHTML,
          isVisible = $container.classList.contains('active') ? true : false
      
      $button.innerHTML = data.toggleText;
      data.toggleText = toggleText;      
      if(!isVisible){
        $container.classList.add('active')
      }else{
        $container.classList.remove('active')
      }      
       
    });
})(document);

Comments

[termit84]

Спасибо, это именно то, что нужно