How to hide current content by clicking outside its area, and when I show another content in IE11?

Question

Clicking on the button shows and hides the corresponding content.

  function funC(id) { var el = document.getElementById(id); if(el.style.display == 'inline-block') el.style.display = ''; else el.style.display = 'inline-block'; } 

 button {margin:2px; outline:0; font-size:12px;} span {padding:2px; border:1px solid silver; font-size:12px;} .cb {display:none;} 

 <button onclick="funC('cnt1');">b1</button><span id="cnt1" class="cb">content b1...</span> <br /> <button onclick="funC('cnt2');">b2</button><span id="cnt2" class="cb">content b2...</span> <br /> <button onclick="funC('cnt3');">b3</button><span id="cnt3" class="cb">content b3...</span> 

fiddle example
1. But, how to hide content when clicking outside its area, and as with showing the next content, hide the previous one?
2. Is it possible to do the same without using id?
Only pure javascript. Thank you.

Answer 1

This might not be a perfect solution but here is a proposition :

 function hideAllContent() { var elements = document.querySelectorAll(".cb"); for(var i =0, l = elements.length; i < l; i++) { var element = elements[i]; element.visible = false; element.style.display='none'; } } function funC(id, event) { // We need to stop the event to avoid bubling until the body event.stopPropagation(); // let's hide others before displaying the new one hideAllContent(); var el = document.getElementById(id); if(el.visible) { el.visible = false; el.style.display = 'none'; } else { el.visible = true; el.style.display = 'inline-block'; } } document.body.onclick = function(event) { if (!event.target.classList.contains('cb')) { hideAllContent(); } } 

 button {margin:2px; outline:0; font-size:12px;} span {padding:2px; border:1px solid silver; font-size:12px;} .cb {display:none;} 

 <button onclick="funC('cnt1', event);">b1</button><span id="cnt1" class="cb">content b1...</span> <br /> <button onclick="funC('cnt2', event);">b2</button><span id="cnt2" class="cb">content b2...</span> <br /> <button onclick="funC('cnt3', event);">b3</button><span id="cnt3" class="cb">content b3...</span> 

About avoiding ids, you could use the target property on click event and find the sibling node or something like that or use a querySelector. But ids are safe and fine i would say.

Answer 2

• No inline on-clicks attached.
• No IDs use.
• Used backward-compatible syntax for IE 11.

 // JavaScript // get all button and span tags var btns = document.querySelectorAll('button'); var otherSpans = document.querySelectorAll('span'); // Detect all clicks on the document document.addEventListener("click", function(event) { const spanElems = document.querySelectorAll('span'); const spanElemsArray = Array.prototype.slice.call(spanElems); let matches = event.target.matches ? event.target.matches('button') : event.target.msMatchesSelector('button'); // If user clicks inside the element, do nothing if (matches) { return; } else { // If user clicks outside the element, hide it! spanElemsArray.forEach( function (spanElem) { spanElem.classList.remove("open"); }); } }); // convert buttons and spans variable objects to arrays const btnsArray = Array.prototype.slice.call(btns); const otherSpansArray = Array.prototype.slice.call(otherSpans); // loop through every button and assign a click to each one btnsArray.forEach( function (btn) { btn.addEventListener('click', spanFunc) }); // Pass the button clicked as a reference function spanFunc(){ openSpan(this); } // toggle the display class on the span next to the button using nextElementSibling method function openSpan(e) { e.nextElementSibling.classList.toggle("open"); // hide every other spans function otherSpanFunc() { otherSpansArray.forEach( function (otherSpan) { if (otherSpan !== e.nextElementSibling) { otherSpan.classList.remove('open'); } }); } otherSpanFunc(); } 

 /* css */ button {margin:2px; outline:0; font-size:12px;} span {padding:2px; border:1px solid silver; font-size:12px;} .cb {display:none;} .open {display:inline-block;} 

 <!-- HTML --> <button>b1</button><span class="cb">content b1...</span> <br /> <button>b2</button><span class="cb">content b2...</span> <br /> <button>b3</button><span class="cb">content b3...</span> 

---

jsFiddle: https://jsfiddle.net/ypofz4d5/55/