Jquery + PHP

[elexavi]

Hola aver si me podeis hechar una mano,

llevoun par de semanas intentando crear un acordeon con las sub-paginas de Wordpress mediante Jquery, he conseguido crearlo y ver el diseño pero lo que no puedo hacer es que funcione, no se si es no se puede o si simplemente hago algo mal.

estoy utilizando el siguiente codigo:

Código Javascript:

<script type="text/javascript"> 
$(document).ready(function(){
    
    $(".accordion h3:first").addClass("active");
    $(".accordion p:not(:first)").hide();
 
    $(".accordion h3").click(function(){
        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });
 
});
</script>
 

Código CSS:

<style type="text/css"> 
 
.accordion {
    width: 480px;
    border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
    background: #e9e7e7 url(http://www.dominio.com/images/arrow-square.gif) no-repeat right -51px;
    padding: 7px 15px;
    margin: 0;
    font: bold 120&#37;/100% Arial, Helvetica, sans-serif;
    border: solid 1px #c4c4c4;
    border-bottom: none;
    cursor: pointer;
}
.accordion h3:hover {
    background-color: #e3e2e2;
}
.accordion h3.active {
    background-position: right 5px;
}
.accordion p {
    background: #f7f7f7;
    margin: 0;
    padding: 10px 15px 20px;
    border-left: solid 1px #c4c4c4;
    border-right: solid 23px #000000;
}
</style>
 

Código HTML:

<div class="accordion">
  <h3>Item One</h3>
  <p>Lorem ipsum dolor sit amet.</p>
  <h3>Item Number Two</h3>
  <p>Lorem ipsum dolor sit amet.</p>
  <h3>Here is Item Three</h3>
  <p>Lorem ipsum dolor sit amet.</p>
</div>
 

esto ultimo lo estoy metiendo en el documento page.php de mi them

esper osu ayuda muchas gracias