Onclick show or hide background

[johnphpnewb]

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.

[JimL]

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

Example

Plunker - Untitled

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

[johnphpnewb]

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

[JimL]

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

[johnphpnewb]

Hello, Jim and i hope that you are doing well

I have a question about this matter. Maybe you have free time to offer advice but all is good if you are busy. Thank you, either way.

I’ve decided to toggle with a bit more simplicity:

toggledisplay('elementID', 'none'); toggledisplay('elementID', 'inline-block');

function toggledisplay(elementID, displayValue) {
        (function(style) {
            style.display = style.display === displayValue ? '' : displayValue;
        })(document.getElementById(elementID).style);

}

now this works but i noticed that my copyright belt is also set to display none. I decided to create a second copyright footer that is positioned absolute at bottom: 1% to be displayed when the main content is toggled. Thus, a copyright notice is always visible.

However, i now have to call the function twice. I think that i can loop over the anonymous function but is this practical? i ask because i prefer to return an action on the event and cut it loose. Thus, onclick="return function(); void(0);" but now i have noway to return because the second function will not be executed. I do not remember alot of javascript and i am unsure of how to proceed. Perhaps it is best to continue with two function calls.

of course, any opinions are helpful. Thank you.

[johnphpnewb]

I suppose that i could list two functions but i was wondering if the callback could be modified to handle multple elements with different display values. The following code works if noone has a better concept:

onclick="return toggledisplay();"

<script>
function toggledisplay() {
        (function(id) {
            id.display = id.display === displayValue ? '' : displayValue;
        })(document.getElementById('wrap1').style, displayValue='none');

        (function(id) {
            id.display = id.display === displayValue ? '' : displayValue;
        })(document.getElementById('wrap2').style, displayValue='inline-block');
}
</script>

edit: or two id parameters will also work.

<script>
function toggledisplay() {
        (function(id1, id2) {
            id1.display = id1.display === 'none' ? '' : 'none';
            id2.display = id2.display === 'inline-block' ? '' : 'inline-block';
        })(document.getElementById('wrap1').style, document.getElementById('wrap2').style);
}
</script>

or further optimized:

<script>
function toggledisplay() {
        (function(id1, value1, id2, value2) {
            id1.display = id1.display === value1 ? '' : value1;
            id2.display = id2.display === value2 ? '' : value2;
        })(document.getElementById('wrap1').style, 'none', document.getElementById('wrap2').style, 'inline-block');
}
</script>

[JimL]

Could you edit the plnkr or create a new one that shows how your html is formatted? Atm it’s unclear and it’s probably easy to just avoid hiding the copyright element, or move it outside the element that will be hidden.

[johnphpnewb]

Hello Jim,

I decided to change the design of the legal information belt, so that it collapses to the top of the page under the navigation belt. I set the background to be transparent, so i now like the idea of the legal info being at the top of the page. Thus, i only need to call the function to toggle the main content band:

<script>
function toggledisplay() {
        (function() {
            id.display = id.display === value ? '' : value;
        })(document.getElementById('wrap1').style, 'none');
}
</script>

my design is very simple and quite elegant actually. However, i came up with ideas along the way which can only be implemented by tweaking the design. The tweaks are complicated. I wanted the copyright info to be positioned absolute at the bottom whenever the content disappears. Otherwise, view background is more like view background with legal info in the way of the view. Not user friendly at all. I’ve tried positioning the legal info but if the body is not height 100%, then there is no bottom window. Thus, the legal info collapses to the top of the page and it is all ready at the bottom. I’ve struggled to figure out something other than body height. I also decided to style all links outside of the content to look like buttons. I love the look and it makes it easy to tell what is clickable versus static text. Anyway, i made the background semi transparent, so yesterday i removed the background color. The effect is quite nice now. The link buttons look like they are floating in the air. Certain background photos relly amplify this effect. My Wife also likes the new design. Thus, we will let the legal links float at the top wih the nav bar and it is less intrusive with no background. I see that the http://www.neuschwanstein.de/ website removes all content. I am not sure that this is legal because i believe that the EU wants legal info to be visible on every page and content within one click. I like my design better which keeps legal info visible and presents it nicely when viewing the background.