How To Change Image And Link On Click As Toggle Function?

Question 1

This should work:

var link = document.querySelector('#arrow a');
link.onclick = function() {
    var image = document.querySelector('#arrow a img');
    if(this.href.slice(-1) === '1') {
        this.href = '#DIV2';
        image.src = 'https://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/1uparrow.png';
    } else {
        this.href = '#DIV1';
        image.src = 'https://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/1downarrow.png';
    }
}

See it in action here: http://jsfiddle.net/TM9ap/7/

Note that I've changed the href attribute in the link to #DIV1 like this <a href="#DIV1">

Question 2

<!DOCTYPE html>

<html>
<title></title>
<head></head>
<body>
<a href = "#DIV1" style="color:BLACK;" onclick="execute();">Click me 
    <img src="UpArrow.png" />
</a>
<div id="DIV1" ></div>

<div id="DIV2" ></div>  
<script>


function execute()
{

if ( document.getElementsByTagName("a")[0].getAttribute("href")==="#DIV1"){
    var img = document.getElementsByTagName("img")[0];
    img.setAttribute("src","DownArrow.png");
    img.parentNode.setAttribute("href","#DIV2");
}
else 
{


    var img = document.getElementsByTagName("img")[0];
    img.setAttribute("src","UpArrow.png");
        img.parentNode.setAttribute("href","#DIV1");
}

}




</script> 

</body>
</html>