Question

I want to convert this functionality from mouseover and mouseout to click event below is the code.

var IdAry=['slide2','slide3','slide4','slide5','slide8','slide9','slide12','slide13','slide14','slide15','slide16'];
window.onload=function() {
 for (var zxc0=0;zxc0<IdAry.length;zxc0++){
  var el=document.getElementById(IdAry[zxc0]);
  if (el){
   el.onmouseover=function() {
     changeText(this,'hide','show')
    }
   el.onmouseout=function() {
     changeText(this,'show','hide');
    }
  }
 }
}
function changeText(obj,cl1,cl2) {
   obj.getElementsByTagName('SPAN')[0].className=cl1;
   obj.getElementsByTagName('SPAN')[1].className=cl2;
}

and below is the HTML part

<div id="graphics">
                    <img src="images/circle-bg.jpg" alt="" class="circleBg"/>
                    <div class="row1">
                        <a href="#" id="slide1" id="selectedSlide">
                            <span id="span1"></span>
                            <span class="hide"></span>
                        </a>
                        <a href="#" id="slide2">
                            <span id="span1"></span>
                            <span class="hide">At this stage, we sit down together and discuss your life goals and begin to develop a plan for funding them. Without knowing where you want to go, we can't help get you there! This is the time to ask a lot of questions and get to know each other. </span>                      
                        </a>
                        <a href="#" id="slide3">
                            <span id="span1"></span>
                            <span class="hide">We need to know your current income and expenses in order to gain a better understanding of resources that can be applied toward your financial goals. We also determine the appropriate size of your emergency fund. </span>
                        </a>
                        <a href="#" id="slide4">
                            <span id="span1"></span>
                            <span class="hide"></span>                      
                        </a>
                    </div>
                </div>

Currently when user mouseover anchor tag of id slide1, slide2, slide3.. etc it added class show to one span and hide to other and vice versa in mouseout.

So if is possible to convert this functionality to click event instead of mouseover and mouseout.

Thanks in Advance

Answer 1

I assume you want to toggle with each click.

Here I do the handler assignment in a separate function, so that each handler can have access to its own local variables.

Then I put the "show" and "hide" in an Array within that function, and on each click the Array is reversed, and passed to changeText using .apply to invoke it.

var IdAry = ['slide2', 'slide3', 'slide4', 'slide5', 'slide8', 'slide9', 'slide12', 'slide13', 'slide14', 'slide15', 'slide16'];
window.onload = function () {
    for (var zxc0 = 0; zxc0 < IdAry.length; zxc0++) {
        var el = document.getElementById(IdAry[zxc0]);
        if (el) {
            setUpHandler(el);
        }
    }
}

function setUpHandler(el) {
    var state = ["show", "hide"];

    el.onclick = function () {
        changeText.apply(this, this, state.reverse());
    }
    el = null;
}

function changeText(obj, cl1, cl2) {
    obj.getElementsByTagName('SPAN')[0].className = cl1;
    obj.getElementsByTagName('SPAN')[1].className = cl2;
}

---

If you don’t like the idea of reversing a short Array each click, then you could do this instead…

function setUpHandler(el) {
    var ab = true;

    el.onclick = function () {
        ab = !ab
        changeText(this, 
                   ab ? "show" : "hide", 
                   ab ? "hide" : "show");
    }
    el = null;
}

function changeText(obj, cl1, cl2) {
    obj.getElementsByTagName('SPAN')[0].className = cl1;
    obj.getElementsByTagName('SPAN')[1].className = cl2;
}

---

Or since you tagged jQuery, you could do this…

$("#" + IdAry.join(",#")).toggle(function() { changeText(this, "hide", "show"); }),
                                 function() { changeText(this, "show", "hide"); }));

---

var prev;

function changeText(obj, cl1, cl2) {

    obj.getElementsByTagName('SPAN')[0].className = cl1;
    obj.getElementsByTagName('SPAN')[1].className = cl2;

    if (prev && obj !== prev) {
        prev.getElementsByTagName('SPAN')[0].className = "";
        prev.getElementsByTagName('SPAN')[1].className = "";
    }
    prev = obj
}