Toggle Open Close have to click twice on phone

Question

I have a simple toggle event and everything works fine on desktop but when I go to phone I have to tap twice to get it to toggle open?

Here is what I have:

$(".service-m").click(function () {
    $(this).next(".serviceinfo-m").toggle()
}); 

<a class="service-m">           
Some Text
</a>

<div class="serviceinfo-m" style="display:none;">The First Line of Text.</div>
<a class="service-m">           
    Some Text
</a>

<div class="serviceinfo-m" style="display:none;">The First Line of Text.</div>
<a class="service-m">           
    Some Text
</a>

<div class="serviceinfo-m" style="display:none;">The Second Line of Text.</div>
<a class="service-m">           
    Some Text
</a>

<div class="serviceinfo-m" style="display:none;">The Third Line of Text.</div>

Also here is a link to jsfiddle http://jsfiddle.net/BrentRansom/tfM6E/1/

Thanks

Answer 1

I went though my css and found that I had a conflict in my css. Here is what I had I am using less:

.service-m {
        margin:0;
        padding:5px 10px;
        position: relative;
        height:70px;
        display: block;
        font-family: @m;
        font-size: 18px;
        color: @light-gray;
        border-top:2px dotted @light-gray;
        .ico-nonhover {
            visibility: visible;
            position: absolute;

            top:10px;
            left:10px;
            width:60px;
        }
        .ico-hover {
            visibility: hidden;
        }
        h2 {
            float:left;
            position: relative;
            top:26px;
            left:70px;
            margin:0;
            padding:0;
        }
    }
    .service-m:hover {

        .ico-nonhover {
            visibility: hidden;
        }
        .ico-hover {
            visibility: visible;
            position: absolute;

            top:10px;
            left:10px;
            width:60px;
        }
        h2 {
            float:left;
            position: relative;
            top:26px;
            left:70px;
            margin:0;
            padding:0;
        }
    }

Here is what fixed it I am using less:

.service-m {
        margin:0;
        padding:5px 10px;
        position: relative;
        height:70px;
        display: block;
        font-family: @m;
        font-size: 18px;
        color: @light-gray;
        border-top:2px dotted @light-gray;
        .ico-nonhover {
            position: absolute;
            top:10px;
            left:10px;
            width:60px;
            z-index:1;
        }
        .ico-hover {
            z-index: 0;
            position: absolute;
            top:10px;
            left:10px;
            width:60px;
        }
        h2 {
            float:left;
            position: relative;
            top:26px;
            left:70px;
            margin:0;
            padding:0;
        }
    }
    .service-m:hover {

        .ico-nonhover {
            z-index:0;
            position: absolute;
            top:10px;
            left:10px;
            width:60px;
        }
        .ico-hover {
            z-index:1;
            position: absolute;
            top:10px;
            left:10px;
            width:60px;
        }
        h2 {
            float:left;
            position: relative;
            top:26px;
            left:70px;
            margin:0;
            padding:0;
        }
    }

Thanks for the help,