Jquery click event is not getting triggered in the mobile browsers

Jquery click event is not getting triggered in the mobile browsers

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>