javascript：Dreamweaverの折りたたみ可能なパネルにスプライするプラス/マイナスアイコンを追加する

Question

私は質問のリンクを持つFAQのチャートを持つウェブサイトを変更しようとしています。
質問リンクをクリックすると、回答がドロップダウンで表示されます。

私の目標は、ドロップダウンの公開アクションのために、リンクされたテキストの隣のマイナスアイコンをプラスアイコンイメージに置き換えることです。

FAQでは、リンクからの表示/非表示を管理するためにSpry Collapsible Panel（sprycollapsiblepanel.js）を使用しています。私がjavascriptソースコードのコードを変更する前に、誰かが気づいている可能性のあるdreamweaverを通してこれを行う簡単な方法があるかどうか疑問に思っていました。

ありがとうございます。

UPDATE：アクションがある明らかに/ショーを呼び出す HTML：

     <div class="CollapsiblePanel"> 
          <div id="CollapsiblePanel1" class="CollapsiblePanel"> 
          <div class="CollapsiblePanelTab" tabindex="1">Fax to E-Mail</div> 
          <div class="CollapsiblePanelContent">Here is the text content as it relates to Fax to E-Mail</div> 
          </div> 
         </div> 

ドロップダウンのためのアクションを構築し、Spryのは、ページの下部に、次のものが必要です。

<script type="text/javascript"> 
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false}); 
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false}); 
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false}); 
</script> 

Answer 1

、次のスタイル規則を改正：

.CollapsiblePanelTab { 
    font: bold 0.7em sans-serif; 
    background-color: #DDD; 
    border-bottom: solid 1px #CCC; 
    margin: 0px; 
    padding: 2px 2px 2px 25px; 
    cursor: pointer; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
} 

これはイメージのためのスペースを作るために左のパディングを高めます。いくつかの簡単なJavaScriptを使用して

.CollapsiblePanelOpen .CollapsiblePanelTab { 
    background-color: #EEE; 
    background-image: url(images/plus.gif); 
    background-position:left top; 
    background-repeat: no-repeat; 
} 

.CollapsiblePanelClosed .CollapsiblePanelTab { 
    background-image: url(images/minus.jpg); 
    background-position:left top; 
    background-repeat: no-repeat; 
    /* background-color: #EFEFEF */ 
} 

Answer 2

プラグインは、開かれたときと閉じられたときに、それぞれ「CollapsiblePanelOpen」と「CollapsiblePanelClosed」となる各パネルタイトルにクラスを追加します。これを使用すると、CSSを使用して+効果に背景画像を追加することができます。

Answer 3

のonclickその後、onclickの何か他のもので、それはイメージだし、あなたがソースコードを変更したくない、とあなたはJavaScriptを使用したい場合は、あなたが必要とするバック+記号

Answer 4

への切り替え画像を切り替えますイメージのsrcプロパティを変更します。

// Grab the img object from the DOM 
var img = document.getElementById("theImageId"); 

// If it's the plus pic, switch for minus, and vice versa. 
if(img.src == "plus.png") { 
    img.src = "minus.png"; 
} 
else { 
    img.src = "plus.png"; 
} 

あなたは（onclickまたは関数または任意に）必要な場所にこのコードを置くことができます。また、明らかに画像のURLを更新する必要があります。 SpryCollapsiblePanel.cssで

Answer 5

簡単修正：

そして、次のルールに画像を追加します。それは、折りたたみ可能なパネルを定義するのdivを見て行うの

<script type="text/javascript"> 
<!-- 
    function name() 
{ 
    var img = document.getElementById("imgid"); 

    if (img.src == "plus.png") { 
     img.src = "minus.png"; 
    } 
    else { 
     img.src = "plus.png"; 
    } 
} 
//--> 
</script> 

：

は、以下のスクリプトを追加します。これは次のようになります。

<div id="CollapsiblePanel1" class="CollapsiblePanel"> 
<div class="CollapsiblePanelTab" tabindex="0">Name <img src="url.com/minus.png" id="imgid"></div> 
    <div class="CollapsiblePanelContent">content</div> 

これは、onclick = "name（）;"を追加するために必要なものです。

<div id="CollapsiblePanel1" class="CollapsiblePanel"> 
<div class="CollapsiblePanelTab" tabindex="0" onclick="name();">Name <img src="url.com/minus.png" id="imgid"></div> 
    <div class="CollapsiblePanelContent">content</div>