jQueryアコーディオンは私のために働いていません

Question

私はjQueryアコーディオンを使用して少しの助けを探しています。

基本的には、標準のh3とpタグではなく、必要な要素があります。

<script> 
jQuery(document).ready(function() { 
    jQuery("#contentHolder").accordion({ 
     header: '.clicker' 
    }); 
}); 
</script> 

を次のように私が持っているjQueryのであり、使用してイムHTMLは次のとおりです、私はそれが仕事をしたいどのように

<div id="contentHolder"> 

<div id="recipe"> 
    <img src="style/img/rec-image.jpg"></img> 
    <p><span style="color: #5C971C; font-weight: bold;">Stuffs M</span><br />stuff goes here</p> 
    <p><a class="clicker" href="#"><img src="style/img/details-btn.jpg"></img></a></p> 
    <div class="ingredients" style="margin-top: 136px;"> 
     <p style="width: 420px;"><span style="color: #5C971C; font-weight: bold;">Ingredients</span><br />2L white vinegar<br />2 cups water</p> 
    </div> 
</div> 

<div id="recipe"> 
    <img src="style/img/rec-image.jpg"></img> 
    <p><span style="color: #5C971C; font-weight: bold;">Stuffs M</span><br />stuff goes here</p> 
    <p><a class="clicker" href="#"><img src="style/img/details-btn.jpg"></img></a></p> 
    <div class="ingredients" style="margin-top: 136px;"> 
     <p style="width: 420px;"><span style="color: #5C971C; font-weight: bold;">Ingredients</span><br />2L white vinegar<br />2 cups water</p> 
    </div> 
</div> 

</div> 

誰かが.clickerをクリックしたときですhref私はdivの "原料"が上下にスライドしたい。 jQuery UI Accordianドキュメント

The content element must be always next to its header. 

あなたの "クリッカー" をによる

イム、誰かが:)

乾杯を助けることができることを望ん

Answer 1

は、p要素

<p><a class="clicker" href="#"><img src="style/img/details-btn.jpg"></img></a></p> 

の内側にありますたぶんp要素に "クリッカー"を置くことはできますか？または、p要素を取り除く。表示しようとしているdivがDOMの「次の」要素であることを確認してください。構造以下

Answer 2

アコーディオンのニーズ：

<div id="contentHolder"> 
    <div class="clicker"> 
     <a href="#">first clickable</a> 
    </div> 
    <div> 
     first content 
    </div> 

    <div class="clicker"> 
     <a href="#">next clickable</a> 
    </div> 
    <div> 
     next content 
    </div> 
</div> 

また、あなたの例では、このjsfiddleで働いてご覧ください。

=== UPDATE ===

私は、これは「div要素の必ずしも行動する必要はありませんが、各ブロック要素にすることを言うのを忘れていましたが：

<div id="contentHolder"> 
    <p class="clicker"> 
     <a href="#"> 
      <img src="style/img/rec-image.jpg" /><br /> 
      <span style="color: #5C971C; font-weight: bold;">Stuffs M</span><br /> 
      stuff goes here<br /> 
      <img src="style/img/details-btn.jpg" /> 
     </a> 
    </p> 
    <p class="ingredients"> 
     <span style="color: #5C971C; font-weight: bold;">Ingredients</span><br /> 
     2L white vinegar<br /> 
     2 cups water 
    </p> 

    <p class="clicker"> 
     <a href="#"> 
      <img src="style/img/rec-image.jpg" /><br /> 
      <span style="color: #5C971C; font-weight: bold;">Stuffs M</span><br /> 
      stuff goes here<br /> 
      <img src="style/img/details-btn.jpg" /> 
     </a> 
    </p> 
    <p class="ingredients"> 
     <span style="color: #5C971C; font-weight: bold;">Ingredients</span><br /> 
     2L white vinegar<br /> 
     2 cups water 
    </p> 
</div> 

また、私を参照してください更新されたjsfiddle