Estoy tratando de mostrar/ocultar ciertos divs dependiendo del clic de un botón/enlace. He leído un poco sobre cómo hacer esto con JQuery, pero parece que no funciona.

editar.html.erb

 <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <div class="pad-bottom"> <a id="edit-profile-button" class="button default ok" href="#"> Edit Profile </a> <div id="profile-information" class="hidden"> <div class="row pad-top"> <div class="col-xs-6 col-sm-6 field-row"> <div class="roboto bold black field-label"> First </div> <%= f.text_field :first_name, class: 'field', placeholder: 'First Name'%> </div> </div> </div> <script type="text/javascript"> $(document).ready(function(event){ $('#edit-profile-button').click(function(){ event.preventDefault(); $('#profile-information').toggle(); }); }); </script>

aplicación.css

 .hidden { display: none; }

Puedo hacer clic en el enlace y caer en un depurador y acceder a los dos elementos que trato de seleccionar en el código jQuery, pero no parece estar haciendo nada en absoluto, el div nunca se hace visible.