Erro for element not visible in selenium

[Midhula Murali]

 Here i use the javascript on mocha for mobile app testing instead of context=['WEBVIEW']
And im using the HTML DOM file to write the testcode like
js with mocha format:

         it("discount",function(){
             return driver
     
             .elementByXPath("//div[text()=\'Coupon\']").click()
             .sleep(1000)
             .elementByXPath("//div[text()=\'%\']").click() //erro
             
         });

html code for this click button is:

<span class="mblSwitch mblSwArcShape2 mblSwitchOn" role="checkbox" aria-checked="true" tabindex="0" id="dojox_mobile_Switch_15" widgetid="dojox_mobile_Switch_15" style="-webkit-mask: -webkit-canvas(DojoMobileMask009427514);">

<div class="mblSwitchInner" style="left: 0px;"><div class="mblSwitchBg mblSwitchBgLeft">
<div class="mblSwitchText mblSwitchTextLeft">$</div></div>

<div class="mblSwitchBg mblSwitchBgRight"><div class="mblSwitchText mblSwitchTextRight">%</div></div><div class="mblSwitchKnob"></div><input type="hidden" name="switch"></div>

</span>
And the error is:

  Error: [element.click()] Error response status: 11, ElementNotVisible - An element command could not be completed because the element is not visible on the page. Selenium error: Element is not currently visible and may not be manipulated

what is the problem it may be?
 how to rectify it?