Onclick show or hide background


#1

Hello, i need some help with JavaScript logic. JavaScript not JQuery please.

problem: i use a site-wide background photo and offer an onmouseover/onmouseout icon which will display block or display none for my main content (which is displayed in a main div).

goal: i want to make a button that will do this onclick, so that the background stays visible until you click the button again. I am having trouble with this logic because there is no onclickshow and onclickhide that functions like onmouseover/onmouseout. onclick is onclick. Thus, how do i detect that the button was clicked to allow a second click to show the content again?

i found a website that does this as i wish to have it on my site:

http://www.neuschwanstein.de/

the show/hide button is at the bottom right of the page.

i see the source code but it looks like JQuery. I wish to use JavaScript but i still need help with understanding how to do this with onclick involving two states.


#2

Just make a toggle function that shows/hides the element based on what state it is in.

Example

const toggleContent = () => {
  let contentBlocks = document.getElementsByClassName('content');
  for (var i = 0; i < contentBlocks.length; i++) {
    let elementVisible = window.getComputedStyle(contentBlocks[i]).display === 'block';
    contentBlocks[i].style.display = elementVisible ? 'none' : 'block';
  }
};

let toggleButton = document.getElementById('toggleButton');
toggleButton.addEventListener('click', toggleContent, false);

Might be uncessary to loop over the content blocks but I assumed there would be an array of elements to show/hide


#3

Thank you Jim. You are always very helpful. I appreciate your time and expertise.


#4

Happy to help, and always happy to see people trying to avoid Jquery ^^