.clone().appendTo - Replace element styles not working?

Question

I have individual three arrows. on click; I want the div below them (letsChat) to change styles and I want to clone and append relevant information in that div. I also want it to revert back to it's original state when it is clicked again or if orientation is changed to portrait.

 document.querySelector('#compositionArrow').onclick = function(){ var letsChat = document.querySelector('.lets-chat'); var letsChatButton = document.querySelector('.lets-chat a'); var compositionArrow = document.querySelector('#compositionArrow') var compositionText = document.querySelector('.composition-text'); if (letsChatButton.style.display='flex' && window.matchMedia("(orientation: landscape)").matches) { compositionArrow.style.transform='rotate(180deg)'; //letsChat.appendChild(compositionText).cloneNode(true); //compositionText.clone().appendTo.letsChat; return false; document.querySelector('.composition-text').clone().appendTo(document.querySelector('.lets-chat')); letsChat.style.background='#00BCD4'; letsChatButton.style.display='none'; } else if (letsChatButton.style.display='none' || window.matchMedia("(orientation: portrait)").matches){ compositionArrow.style.transform='rotate(180deg)'; letsChat.style.background='#ff8f00'; letsChatButton.style.display='flex'; } } 

example can be found below: (you may have to play with window

artpenleystudios.com

Answer 1

Here's something that demonstrates part of what you asked. It doesn't take into account orientation change, but it handles the click part. As far as I know, there's no straightforward way to detect orientation change, but here's an article that talks about a few options . Another idea would be to use jQuery Mobile as it fires orientationchange events.

So after much back and forth and after looking at your site more closely, this is what I managed to cobble together.

jQuery('#compositionArrow').click(function() {

  var $letsChat = jQuery('.lets-chat');
  var letsChat = $letsChat[0];
  var letsChatButton = $letsChat.find('a')[0];

  // Remove old composition text if it exists.
  $letsChat.find('.composition-text').remove();

  if (letsChatButton.style.display !== 'none' && window.matchMedia("(orientation: landscape)").matches) {

    this.style.transform = 'rotate(180deg)';

    $letsChat.append(jQuery('.composition-text').clone());
    letsChat.style.background = '#00BCD4';
    letsChatButton.style.display = 'none';
  }

  else if (letsChatButton.style.display === 'none' || window.matchMedia("(orientation: portrait)").matches) {

    this.style.transform = '';

    letsChat.style.background = '#ff8f00';
    letsChatButton.style.display = 'flex';
  }

});

It works for me in FireFox on a downloaded version of your site.

Cheers!