Question

Why can I click “project info” in this code to reveal the text but cant click it again to get hide the text. I am in experienced with javascript and have made a mess of the code…any help would be appreciated greatly. Here is the html code:

<div  class:"descinner;" style="position:fixed; left:260px; top:595px;">
  <a href="javascript:void(0);" class="showDesc" style="display: inline; ">Project info</a>
  <div style="width: 500px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color:#fff; opacity: 0.9; position: fixed; margin-top: 10px; margin-left: 100px;  font-size: 14px; font-weight:bold; line-height: 125%; display: none; background-position: fixed; ">
    Exces eturio. Ipis eos autatus ad quia cum santo doluptio que dignatenis dipsam non cuptam, tectaer iosaperiam repudi imo quaerum resciet acercianis apedipsam dellendae nobis am raectotatur, cum expla enit placcup tasitium quias qui quia illaceribus quiates dolecte occusandit anduntibus doluptat.               
  </div>
</div>      

and here is the script:

<script type="text/javascript">
  var descShow = false;
  $('.showDesc').click(function(){
    $(this).hide();
    $(this).next().show();
    $('.descInner').css();                      
    descShow = true;
  });

  var ee;
  $('body').click(function(e){
    e = window.event || e; 
    ee = e;

    var node = e.srcElement || e.target;
    var $node = $(node);

    if(node=='javascript:void(0);'){
      return;
    }

    while ($node.html()!=null){
      if($node.hasClass('descInner')){
        $('.showDesc').next().hide();
        $('.showDesc').show();
        $('.descInner').css();
        descShow = false;
        return;
      }
      $node = $node.parent();
    };
});
</script>

Answer 1

If all you want to do is show the text when you click the link, then hide it on a body click, use something like this. Working example can be found here: http://jsfiddle.net/vb9NU/

$('.showDesc').click(function(e) {
    e.stopPropagation(); 
    $(this).hide().next().show(); // hides the link, shows the next div
    // $('.cssclass').show(); // if you want to make the div a css class, bit easier incase you change your markup (INSTEAD of .next().show() above)
});

$('body').click(function() { 
    $('.showDesc').show().next().hide(); // (if you make the div to show/hide based on a selector instead of next(), do a similar sort of thing as above
});

e.stopPropagation() stops the click of the link ‘bubbling up’ to the browser thinking its ALSO a body click (which would result in it immediately showing then hiding it).

I apologise if I didn’t understand what you were after. Just FYI, $node is a div element, not a string as well.

Try using console.log(whateveryouwanttolog) e.g. console.log($node) to see the value of a variable in the console (in firebug or in chrome/safari developer tools). It makes things a lot easier 🙂