使用div切换更改图像onclick

Question

I have some code I'm working on that toggles a div of information depending on the user clicking an image. What I'm looking for is assistance in getting the image to swap when the user clicks, then to swap back when it's clicked again. The image should be changing to: https://casetest.blackboard.com/bbcswebdav/users/kas200/collapse.gif

I'm a newbie when it comes to coding with JS, so any help provided would be much appreciated!

<script type="text/javascript">
    function toggleMe(a){
        var e=document.getElementById(a);
        if(!e)return true;
        if(e.style.display=="none"){
            e.style.display="block";
        }
        else{
            e.style.display="none";
        }
        return true;
    }
</script>

<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para1')" value="Toggle"><br>
<div id="para1" style="display:none">
    This is my text for section 1!
</div>
<br>
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para2')" value="Toggle"><br>
<div id="para2" style="display:none">
    This is my text for section 2!
</div>
<br>
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para3')" value="Toggle"><br>
<span id="para3" style="display:none">
    This is my text for section 3!
</span>

Answer 1

You've got the right idea. What I did for this case was add an id to each image with the name of the div + _img -- grabbed that element the same way, then updated the src:

javascript

function toggleMe(a){
    var e=document.getElementById(a);
    var i=document.getElementById(a+'_img');
    if(!e)return true;
    if(e.style.display=="none"){
        i.src="https://casetest.blackboard.com/bbcswebdav/users/kas200/collapse.gif"
        e.style.display="block"
    }
    else{
        i.src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif"
        e.style.display="none"
    }
    return true;
}

html

<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para1')" value="Toggle" id="para1_img"><br>
<div id="para1" style="display:none">
This is my text for section 1!
</div>
<br>
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para2')" value="Toggle" id="para2_img"><br>
<div id="para2" style="display:none">
This is my text for section 2!
</div>
<br>
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para3')" value="Toggle" id="para3_img"><br>
<span id="para3" style="display:none">
This is my text for section 3!
</span>

here's a working example: http://jsfiddle.net/8h4T7/1/

Answer 2

PURE CSS

There's no need to use JS. Here you go with a simple HTML / CSS solution:

LIVE DEMO

<input id="_1" class="toggler" type="checkbox">
<label for="_1"></label>
<div>This is my text for section 1!</div>

CSS:

.toggler,
.toggler + label + div{
  display:none;
}
.toggler + label{
  background: url(https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif);
  position:relative;
  display:inline-block;
  width:11px;
  height:11px;
}
.toggler:checked + label{
  background: url(https://casetest.blackboard.com/bbcswebdav/users/kas200/collapse.gif);
}
.toggler:checked + label + div{
  display: block;
}

The good part is that both your images are loaded in the browser so there won't happen an useless image request to the server (creating a time-gap) with no image visible (while it's loading).

As you can see the trick is to hide the checkbox and the div , than using the :checked state you can do your tricks.

---

PURE JS

If you really want to play with JS than here's some changes to simplify the HTML markup:

<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" value="para1"><br>
<div id="para1" style="display:none">This is my text for section 1!</div>

_{Note that I've changed the useless value to something useful, and removed the unnecessary ID from your inputs. Also, I've removed the messy HTML inline onclick callers. They're hard to maintain in production.}
The input value will now help us to target your ID containers.

var imgSRC = "//casetest.blackboard.com/bbcswebdav/users/kas200/";

function toggleFn(){
    var tog = this.tog = !this.tog;
    var targetEl = document.getElementById(this.value);
    targetEl.style.display = tog ? "block" : "none";
    this.src = imgSRC + (tog?"collapse":"expand") + ".gif";
}

var $para = document.querySelectorAll("[value^=para]");
for(var i=0; i<$para.length; i++) $para[i].addEventListener('click', toggleFn, false);

LIVE DEMO 1

Another JS version:

var imgSRC = "//casetest.blackboard.com/bbcswebdav/users/kas200/";

function toggleFn(){
    var el = document.getElementById(this.value);
    el.style.display = el.style.display=='none' ? "block" : "none";
    this.src = imgSRC +(this.src.match('expand') ? "collapse" : "expand")+ ".gif";
}
var $para = document.querySelectorAll("[value^=para]");
for(var i=0; i<$para.length; i++) $para[i].addEventListener('click', toggleFn, false);

LIVE DEMO 2

---

jQuery VERSION

Having the exact same as above HTML this is the needed jQuery code:

var imgSRC = "//casetest.blackboard.com/bbcswebdav/users/kas200/";

$(':image[value^="para"]').click(function(){
    var tog = this.tog = !this.tog;
    $('#'+ this.value).fadeToggle(); // or use .slideToggle();
    this.src = imgSRC + (tog?"collapse":"expand") + ".gif";
});

LIVE DEMO

---

The interesting part of the code above is the way we store the current state directly into the this element reference Object:

 var tog = thistog = !this.tog;

and using a set negation we create the toggle state.
Instead, if you're familiar with the bitwise XOR operator you can use it (to achieve the same) like:

 var tog = this.t ^= 1;

XOR DEMO

Answer 3

Using jQuery

You can also use jQuery. It's a tool designed to help young coders. It allows manipulation of JavaScript through minimal functions.

Adding <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> to the head of your document will allow you to use jQuery. Then you can add some style to your collapsibles like this method based on pennstatephil's code.

function toggleMe(a){
    var e=$('#'+a);
    var i=$(a+'_img');
    if(!e) return false;
    if(e.css('display') == "none" ) {
        i.attr('src', 'https://casetest.blackboard.com/bbcswebdav/users/kas200/collapse.gif');
        e.fadeIn('slow');
    }
    else {
        i.attr('src', 'https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif');
        e.fadeOut('fast');
    }
    return true;
}

And an example can be seen here

jQuery API Documentation can be found here