0

I have two div's, the one that I will be clicking is "InterestsHeader". The one that I want to toggle is "Interests"

This code doesn't seem to work, I'm sure that it is to do with my div - InterestsHeader but can't spot anything. 

$(".InterestsHeader").click(function() {
  $(".Interests").toggle("fast");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="InterestsHeader">
  <headerdivtext>&#9660; Personal Information</headerdivtext>
</div>

<div class="Interests">
  <b>Test header</b>
  <br />
  <p>
    test div stuff
  </p>
  <table>
    <tr>
      <td>
        test
      </td>
      <td>
        test
      </td>
      <td>
        test
      </td>
      <td>
        test
      </td>
    </tr>
    <tr>
      <td>
        test
      </td>
      <td>
        test
      </td>
      <td>
        test
      </td>
      <td>
        test
      </td>
    </tr>
  </table>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Chrislaar123
  • 323
  • 2
  • 6
  • 17
  • 1
    you don't have any element with the Interests class – Juan Jun 17 '15 at 17:18
  • Sorry I forgot to put this into the initial question. Could you take another look now please? – Chrislaar123 Jun 17 '15 at 17:27
  • it works fine http://codepen.io/jcastillo/pen/aOyrQg look at your browser console to see if there's any error and make sure you have the jquery library – Juan Jun 17 '15 at 17:27
  • Works fine here too as soon as I add jQuery to your code - try running your snippet – mplungjan Jun 17 '15 at 17:28
  • Perhaps you need to cater for old IEs? http://stackoverflow.com/questions/9845011/are-custom-elements-valid-html5 – mplungjan Jun 17 '15 at 17:35
  • Yep the code works fine in codepen. I'm getting no errors on my browser console. I've get the jquery library needed. This one is really stumping me. I'll try looking at different broswers. – Chrislaar123 Jun 17 '15 at 17:41
  • Seems to work OK in your fiddle. – taxicala Jun 17 '15 at 17:41

1 Answers1

2

You dont have any element in your html with class .Interests.

HTML:

<div class="InterestsHeader">
    <headerdivtext>&#9660; Personal Information</headerdivtext>
</div>
<div class="Interests"></div>

JQUERY:

$(".InterestsHeader").click(function () {
    $(".Interests").toggle("fast");
});
taxicala
  • 21,408
  • 7
  • 37
  • 66