1

I'm working on modifying a website which has a chart of FAQs which have has a question link.
If question link is clicked, it reveals the answer in a drop down.

My goal is to swap out a plus icon image with a minus icon next to the linked text for the drop down reveal action.

the FAQs use Spry Collapsible Panel (sprycollapsiblepanel.js) to manage the show/hiding from the link. before I go about modifying the code in the javascript source code, I was wondering if there was an easier way of doing this through dreamweaver someone might be aware of.

thanks in advance.

UPDATE: the html calling the show/reveal actions are: 

                        <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>

The construct the actions for the drop down, Spry requires the following at the bottom of the page: 

<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>
phill
  • 13,434
  • 38
  • 105
  • 141

5 Answers5

1

In SpryCollapsiblePanel.css, amend the following style rules:

.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;
}

This increases the padding on the left to make room for the image.

Then add the images to the following rules:

.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 */
}
David Powers
  • 1,644
  • 12
  • 11
0

THe plug ins adds a class to each panel title when is opened and when is closed, these are "CollapsiblePanelOpen" and "CollapsiblePanelClosed" accordingly. With that you can use CSS to add the +- effect with a background image perhaps.

amosrivera
  • 26,114
  • 9
  • 67
  • 76
  • I tried added images into the css file accordingly and it didn't work. thanks for the suggestion though. – phill Jan 10 '11 at 07:17
0

onclick switch an image then onclick of something else switch back to + sign

tekknolagi
  • 10,663
  • 24
  • 75
  • 119
0

If it's an image, and you don't want to change the source code, and you want to use javascript, you'll need to change the src property of the image.

// 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";
}

You can put this code in wherever you need (in an onclick or a function or whatever). Also, the URLs for the images will obviously need to be updated.

Ben
  • 54,723
  • 49
  • 178
  • 224
  • phill said "If question link is clicked" so I assume so. But it depends on the handler being used, it's up to the designer. – Ben Jan 10 '11 at 06:40
0

Easy fix with some simple JavaScript.

Add the following script:

<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>

When that's done look at the div defining the collapsible panel. It looks something like this:

<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>

All you need for this to work is to add onclick="name();" to the syntax:

<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>
Snapcount
  • 1