When you click on the initial link to go to my website and go on the web page with the accordion the accordion appears and hides at 1500 as requested. However when i click on the headings to bring the text up nothing appears. The heading just highlights. There are no errors and the console log states "ready to do some jquery" as i asked it to do.

part of my view

```
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="<?php echo base_url('/js/my_accordian.js'); ?>"></script>

<div id="accordion">    
   <h2>Information</h2>
   <p>more information</p>
   <h2>Information 2</h2>
   <p>more information 2</p>    
   <h2>Information 3</h2>
   <p>more information 3</p>
</div>

```

js 

```
$(document).ready(function () {
console.log("ready to do some jquery");
$('h2').addClass('exampleClass');
$('p').hide(1500);
$("h2").click(function () {
    $('.activeHeading').next().slideUp(400);
    $('activeHeading').removeClass('activeHeading');
    $(this).addClass('activeHeading');
    $(this).next().slideToggle(400);
 });
});

```

css

```
body {
    font-family:"Arial";
    font-size:0.8em;
    color:black;
    line-height:22px;
   }
h2 {
   /*border-top:1px solid #999999; */
   padding:5px;
   }
.pageTitle {
    font-family:"Garamond";
    color:#777777;
    font-weight:lighter;
    font-size:3em;
}
.activeHeading {
    color:#00AAFF;
}
.exampleClass {
    background-color:red;
}
.anotherExampleClass {
    background-color:blue;
}

```