why is this accordion toggle not working?

Question

I just found this script online. but when I insert it in my code, it is not working. when i click on the the accord-header the accord-content is supposed to "slide out" or just to change from visible to not visible. Do I use false syntax or where is the Problem? It would be great if someone can help me. I have prepared a codesnippet.

 <div id="accordion"> <div class="accord-header"> <a id="h31"> <span id="textspan1">1.Text<br /></span><br /> </a> </div> <div class="accord-content"> <p id="p1"> <span id="Span">dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et&nbsp;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</span><br /> </p> </div> </div> 

  $(document).ready(function($) { $('#accordion').find('.accord-header').click(function(){ //Expand or collapse this panel $(this).next().slideToggle('fast'); //Hide the other panels $(".accord-content").not($(this).next()).slideUp('fast'); }); }); 

 #accordion { float: left; height: auto; margin: 70px 0px 0px; clear: left; width: 100%; display: block; } #h31:hover { color: rgb(0, 235, 199); line-height: 1.5em; font-weight: 400; } #p1 { float: none; font-size: 1em; width: 100%; height: auto; text-align: left; font-weight: normal; line-height: 1em; margin: 0px 0px 0px 0%; clear: left; min-height: 149px; display: block; padding: 1.4% 1.4% 11px; } #Span { font-size: 1.3em; color: black; font-family: source-sans-pro; line-height: 1.3em; font-weight: 200; } #h31 { float: left; font-size: 1em; width: 100%; height: auto; text-align: center; font-weight: 400; line-height: 1.5em; margin: 0px; clear: none; min-height: 0px; font-family: source-sans-pro; color: black; text-transform: uppercase; letter-spacing: 0.2em; padding: 20px 0px 0px; display: block; } #textspan1 { font-weight: 300; } .accord-header { float: left; height: auto; margin-left: 0%; margin-top: 0px; clear: none; width: 100%; border-bottom-color: rgb(0, 235, 199); border-bottom-width: 6px; border-bottom-style: solid; cursor: pointer; } .accord-content { float: left; height: auto; margin-left: 0%; margin-top: 0%; clear: both; width: 100%; } .accord-content.default {display: block;} @media only screen and (max-width: 1024px) { #accordion { float: left; height: auto; margin: 70px 0px 0px 1px; width: 100%; display: block; clear: both; } #p1 { display: block; font-size: 0.9em; font-family: source-sans-pro; clear: none; width: 100%; } #Span { float: none; } #h31 { float: left; font-size: 1em; height: auto; text-align: center; margin: 0px; clear: none; min-height: 0px; font-family: source-sans-pro; color: #000; text-transform: uppercase; letter-spacing: 0.2em; width: 100%; } .accord-header { float: left; height: auto; margin-left: 0%; margin-top: 0px; clear: none; width: 100%; } .accord-content { float: left; height: auto; margin-left: 0%; margin-top: 0px; clear: both; width: 100%; } } @media only screen and (max-width: 768px) { #p1 { font-size: 0.8em; line-height: 1.9em; font-weight: 300; } #h31 { margin-top: 0px; margin-left: 0px; clear: none; } #textspan1 { float: none; font-size: 1em; line-height: 1em; } #textspan2 { float: none; font-size: 1em; line-height: 1em; font-weight: 300; } } 

 <div id="accordion"> <div class="accord-header"> <a id="h31"> <span id="textspan1">1.Text<br /></span><br /> </a> </div> <div class="accord-content"> <p id="p1"> <span id="Span">dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et&nbsp;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</span><br /> </p> </div> </div> 

Answer 1

You need to reference jquery library for the slide out effect

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>

checkout this Jsfiddler