JQuery: ссылка в выпадающем меню не активна

Моя проблема в том, что Wikipedia-Link внутри выпадающего меню не может быть нажата. Я уже пытался исправить проблему с stopPropagation(); но это не сработает.

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>

Я пробовал так много разных способов с stopPropagation(); но это не сработало. Может быть, я просто не понимаю, как это работает, или мне нужно решить мою проблему по-другому.

Итак, что является лучшим способом сделать кликпинг-кнопку Википедии доступной?