Have been trying to perform a DIV hide show on a page of my website.
It was working fine with plain javascript but noticed it was not working when simulated on mobile devices..after bit of research I changed my code to the following, is there anything wrong in it ?
<script> $(document).ready(function () { var portfolioDiv = document.getElementById('portfolio'); var resultsDiv = document.getElementById('results'); $('#RenderPortfolio_Btn').on('click touchstart', function () { resultsDiv.setAttribute('class', 'col-md-9 hidden'); portfolioDiv.setAttribute('class', 'col-md-9 visible'); }); $('#RenderResults_Btn').on('click touchstart', function () { portfolioDiv.setAttribute('class', 'col-md-9 hidden'); resultsDiv.setAttribute('class', 'col-md-9 visible'); }); }); </script>
This is the element having the id
<div class="col-md-3 col-sm-12 col-xs-12"> <br /> <ul class="nav nav-stacked"> <li style="background-color: lightgreen ; color:black;font-weight:bold"><a href="#" id="RenderPortfolio_Btn">Introduction</a> </li> <li style="background-color: lightgreen; color:black;font-weight:bold"><a href="#" id="RenderResults_Btn">Key Achievements</a> </li> </ul> </div>