toggle() скрипт аккордеона не работает

Question

Я столкнулся с контрольно-пропускным пунктом с этим и, похоже, не могу обернуть вокруг себя, почему этот сценарий не будет работать на моей тестовой странице. У меня есть jquery linked, а затем этот скрипт. это мой единственный скрипт, поэтому я знаю, что это не конфликт js. скрипка здесь: http://jsfiddle.net/dXWAY/7

var content = $('.content').hide(); 

$('.toggleBtn').on('click', function() { 
    $(this).next('.content').slideToggle(); 
    return false; 
}); 

.toggleBtn { 
    background:deepskyblue; 
    display:block; 
    float:Left; 
    width:100%; 
    padding:10px; 
    border-bottom:1px solid #ccc; 
    border-top:1px solid #fff; 
    color:#fff; 
    cursor:pointer; 
} 

.content { 
    background:skyblue; 
    float:left; 
    overflow:hidden; 
    width:100%; 
    padding:10px; 
} 

<a class="toggleBtn">Click Me!</a> 

<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus porro modi ut itaque ipsum natus explicabo vero sequi beatae libero voluptatibus sit culpa debitis tempore! Sint eum ipsum consequatur!</div> 

Answer 1

Вашей проблема (на живом примере) является то, что вы запускаете скрипт JS написанные вами (в секции ГОЛОВЫ) до загрузки DOM.

Простым решением было бы запустить этот скрипт только после того, как документ будет готов. Вы можете достичь этого, просто введя его в document.ready()

<script> 
$(document).ready(function() { 
    var content = $('.content').hide(); 

    $('.toggleBtn').on('click', function() { 
     $(this).next('.content').slideToggle(); 
     return false; 
    }); 
}); 
</script>