Замена содержимого и появление div при клике. Как реализовать?
Способов масса. Вот один из:HTML:<button class="js-button" data-toggle-text="Close">Open</button>
<div class="js-container hidden">
Some text here.
</div>CSS:.hidden {
  display: none;
}
Если вы не используете jQuery в проекте, то посмотрите пример на чистом JavaScript:JavaScript: (Демо: codepen.io/anon/pen/EjzYpy );(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);
Если используете jQuery, посмотрите следующий пример:jQuery: (Демо: codepen.io/anon/pen/MwdgEN )$(function(){
  var $button    = $('.js-button'),
      $container = $('.js-container');
  
  $button.on('click', function(){
    var toggleText = $(this).data('toggle-text');
    
    $(this).data('toggle-text', $(this).text())
           .text(toggleText);
    
    $container.toggleClass('hidden');
  });
});
Пример jQuery . Пример JSВот это прочитать.
Мой вариант на js.
css:.Open{
    background:#508;
}
.Close{
    background:#fd3;
}
html:<div id='click'>click</div>
js:t = document.getElementById('click')
t.onclick = function(){
    this.className = (this.className == 'Open')?' Close':'Open'
}
document.onclick = function(e){
    if(e.target.id != 'click'){
        t.className = ' Open'
    }
}
Прокомментируйте, какой код лучше, тот что "пример js" или которой я выложил.
Меня интересует ваше мнение.