I'm trying to show some divs on specific link click.

Question

My task for this evening is to show and hide a div (eventually two divs or more actually) when a link from the main nav is clicked. This will then hide divs when they click on another part of the main navigation.

DONE

Thanks go to everyone especially..Matchu....

the code is now as below and works....

<script type="text/javascript">
$(document).ready(function(){
     $("#tagcloud").hide();
      blogLink = $("ul.mainnav li.blog a").click(function () {    
      $("#tagcloud").show();});$("ul.mainnav li a").not       (blogLink).click(function () {    
      $("#tagcloud").hide();});    

      });
</script>

If anyone can see any possible problems with this, using it at www.alwaystwisted.com/index.html please let me know....

Also, have just ordered JQuery 1.3 book....so hopefully get my head around it a bit or a lot better....

regards

Sty

Answer 1

Updated a THIRD time for the newest upload!

Playing around with the page you gave me, here's what I could make work in the Firebug console, before you switched tagcloud to a class:

blogLink = $("ul.mainnav li.blog a").click(function () {
    $("#tagcloud").show();
});
$("ul.mainnav li a").not(blogLink).click(function () {
    $("#tagcloud").hide();
});

Give that one a try :)

And about that "use class not ID thing," that was before I saw what you were actually trying to do. You should be using ID if there's only one instance - sorry for the confusion!

Answer 2

I'm not sure I understand your goal here without seeing some HTML as well, but just a couple things you could check first.

• $('ul.mainnav) ... You need to close that string up
• $(this).next("#tagcloud") ... You can simply use $("#tagcloud") since you should have unique IDs on the page.

If you post some more of the code that might help people.

Answer 3

Besides the syntax errors already mentioned in this thread, you'll probably need to return false; on those link clicks, otherwise your action will occur, and the link will still head off to wherever.

Of course, this opens the door on the accessibility argument. I'd sooner get a working demo before worrying about that aspect, though.

Answer 4

I'll have a go: your click handler on li.blogcontent is bubbling up to ul.mainnav and executing its click handler, too.

<script type="text/javascript">
$(document).ready(function(){
    $('li.blogcontent').click(function(e) { 
        e.stopPropagation();   // Stop the bubbling up to its parent
        $("#tagcloud").show();
    });
    $('ul.mainnav').click(function() {
        $("#tagcloud").hide(); 
    });                            
});
</script>

or using event delegation and bubbling (which I haven't tested, but should be close):

<script type="text/javascript">
$(document).ready(function(){
    $('ul.mainnav').click(function(e) {
        var target = $(e.target);
        if(target.hasClass('blogcontent')){
            $("#tagcloud").show();
        }
        else{
            $("#tagcloud").hide(); 
        }
    });                            
});
</script>

Answer 5

The event bubbling up from the li element to the ul container is probably the problem. I'm a bit unfamiliar with jQuery but if it is passing straight DOM Events without modifying it (which I doubt it is since the author of jQuery is rather against modifying existing objects) then I would suggest against using only preventDefault() as it is not supported by all browsers. Should have a method in your toolbelt for stopping events and preventing bubbling e.g.

function stopEvent(event){
   event.preventDefault();
   event.stopPropagation();
   event.stopped = true;
}