-1

I have a DIV (box) that’s toggled (with JavaScript) between ‘display: block’ and ‘display: none’ when clicking another DIV (text). There is also a close option (‘display: none’) in that box.

There are also other DIVs (Google Translate drop down menu for exemple) in that box, that I want to be clickable without the box closing.

  • So, how do I make the box close (with CSS: ‘display: none’) when clicking OUTSIDE of that box? How can I implement that in the code below?

  • A simplification and demonstration of my setup: JSFiddle

JavaScript and HTML (cleaned out excessive data):

<div id="toggle-container">

   <div id="toggle-text"> <p class="notranslate"><a href="#"
   onclick="toggle_visibility('toggle-box');">TOGGLE BOX</a></p>

   <script type="text/javascript">
       function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
       e.style.display = 'none';
       else
       e.style.display = 'block';
       }
   </script>

     <div id="toggle-box">  

         <div id="box-content">..with other divs...</div>

       <div id="translate-box-close">
               <a onclick="document.getElementById('toggle-box')
               .style.display='none';return false;" href="">CLOSE BOX</a></div>
     </div>
   </div>  
</div>

CSS (cleaned out excessive data):

#toggle-container { 
}

#toggle-text { 
}

#toggle-box { 
 position: ABSOLUTE;
 display: NONE;
}

#box-content {
}
vikar
  • 27
  • 1
  • 12
  • Have you tried adding the click event to the body tag? – apohl Mar 11 '14 at 14:14
  • @apohl No, I don't know JavaScript. All the code above have been taken from others and I just adjusted it a bit. How could I implement a “click event to the body tag” into my code above? Thank you! – vikar Mar 11 '14 at 14:19
  • possible duplicate of [Show div once clicked and hide when clicking outside](http://stackoverflow.com/questions/16193424/show-div-once-clicked-and-hide-when-clicking-outside) plus dozens of others. – Evan Davis Mar 11 '14 at 14:25
  • Agreed. Always be sure to search SO for answers before asking a new question. – apohl Mar 11 '14 at 14:35
  • I've searched. Didn't find any answer including the CSS display: none/block they way I have it. – vikar Mar 11 '14 at 14:50

1 Answers1

0

Try this:

add onclick="toggle_visibility('toggle-box');" to the <html> tag.

Or inside JavaScript:

 $('html').click(function() {
     toggle_visibility('toggle-box');
 });
apohl
  • 1,913
  • 27
  • 30
  • If I do '' it makes the toggle-box toggle wherever I click all the time. Not so good. What’s needed is that it only is applied IF the toogle-box is ‘display: block’ already I guess? When I inserted '' in the document I didn’t get to work at all… Maybe placed it wrongly. – vikar Mar 11 '14 at 14:48
  • @vikar Then inside the function you call, add a check for if the toogle-box is ‘display: block’. If you don't know how, you can search SO and find probably a hundred answers. – apohl Mar 11 '14 at 15:05
  • Yes, but wont the toggle-box close whenever I click inside of the box aswell then? I just want it to close whenever I click outside och the box and outside of all the divs inside of that box. – vikar Mar 11 '14 at 15:23
  • Okey, I tried [this](http://stackoverflow.com/questions/16193424/show-div-once-clicked-and-hide-when-clicking-outside) as many suggested, but couldn't get it work in [my full setup](http://jsfiddle.net/p6u4j/)... how would you put in the code in the suggested solution in my code? Thank you, would really appreciate it. – vikar Mar 11 '14 at 18:20