JQuery: link in dropdown is not clickable

Question

My problem is that the Wikipedia-Link inside the dropdown is not clickable. I already tried to fix the problem with stopPropagation(); but it doesn't work.

JsFiddle

HTML:

  <section id="help_advanced_rules_section">
                <div class="bar_bottom_left"></div>
                <div class="bar_mid" id="bar_mid_7"><h3>8. Rules</h3></div>
                <div class="bar_bottom_right"></div>
                <div class="bar_ear" id="bar_ear_7"></div>
                <article id="article_7">
                    <div class="image_section">
                    <img src="images/help_1.png" id="image_7">
                    </div>
                    <div class="text_section">
                      <p>Look up the rules on Wikipedia.</p>
                      <p><a href="http://google.de"><img src="images/wikipedia_en.png" id="wikipedia"></a></p>      
                    </div>

                </article>
   </section>

JQUERY:

<script>
        function closeArticle(article) {


            article.css("paddingTop", "0px");
            article.css("paddingBottom", "0px");
            article.animate({maxHeight: "1.2em"}, 200, function () {
                article.children().css("display", "none");                       
            });
            article.removeClass('expanded');

        }

        function openArticle(article) {
            closeAllArticle();
            article.children().css("display", "block");
            article.css("paddingTop", "1em");
            article.css("paddingBottom", "0.5em");
            article.animate({maxHeight: "2000px"}, 250, function () {
                article.animate({maxHeight: article.height() + "px"}, 0);    //maxheight wird auf die höhe gesetzt die das element nach dem ausfahren hat um die animation danach zu verkürzen

                article.addClass('expanded');
                $('html, body').animate({scrollTop: article.offset().top - 40
                                                    }, 100);
            });


        }

        function closeAllArticle() {
            $('.expanded').each(function(){
                closeArticle($(this));
            });

        }
        function openCloseArticle(article) {

            if(article.hasClass('expanded'))
            {
                closeArticle(article);
            }
            else
            {
                openArticle(article);
            }
        }
        $( document ).ready(function() {        
            var toggle = function(id, element_name) {
                                    //Get ArticleID
                var toRemove = element_name;
                var number = id.replace(toRemove, '');

                var articleID = "#article_"+number;
                var article = $(articleID);

                openCloseArticle(article)
            };

            $(".bar_mid").click ( function() {
                toggle($(this).attr("id"), "bar_mid_");
            });

            $(".bar_ear").click ( function() {
                toggle($(this).attr("id"), "bar_ear_");
            });


        });


        </script>

I tried so many different ways with stopPropagation(); but it didnt work. Maybe I just don't get it how it works or I need to solve my problem on another way.

So what is the best way to make the Wikipedia-Button clickable?

Answer 1

http://jsfiddle.net/TNTzg/1/

The problem was in z-index:-1 in article css rule. The article block was actually behind the section block. You could find that this was the problem by right clicking your link in chrome and selecting "Inspect Element". It would open the developer tools with the topmost element that is under the mouse cursor selected.