在移动页面上展开/折叠

Question

I have a weird thing happening.

I have a page that with several items on it, and each one has an iconfont. When the icon is clicked it changes the icon, and a new

element shows below it. And of course, the opposite happens, clicking again changes back the icon and hides it. This works great.

However, when I try to make it work on a mobile version, which is called "modal" (and it kind of is a modal), the expand/collapse does not work. The main modal appears when clicked by a button, so that is not a problem. I am using the Chrome emulator for an iPhone 5. The same function is called, and I have verified it finds the function, but it won't expand (so I can't test collapsing either).

This is the basic HTML:

        <p><span id="CraveTV" class="featureToggle plus-fa"></span> CraveTV </p>
        <p id="CraveTV_list" class="goApps">Stream Showtime hits, HBO classics, the best sitcoms in TV history, and CraveTV originals.  Available on <a href="">iOS</a> or <a href="">Android</a>.</p>

The css:

.plus-fa {
    &:before {
        @include icon($icon-plus-fa);
        color: #0056A7;
    }
}
.minus-fa {
    &:before {
        @include icon($icon-minus-fa);
        color: #0056A7;
    }
}
.goApps {
    display:none;
    padding-bottom: 10px;
}

And the jquery function:

$(document).ready(function(){
    $(".featureToggle").click(function(){
        var togglelist = "#" + $( this ).attr('id') + '_list';
        $(togglelist).toggle();
        $( this ).toggleClass('plus-fa');
        $( this ).toggleClass('minus-fa');
    });
 });

The code used is exactly the same on the desktop version and the mobile version, although they are in difference scss files, specified for the desktop version and the mobile version.

Can anyone help me figure out why it won't work? I am wondering if it is a "modal" limitation, or something simple I am missing.

Answer 1

Put # inside href

<p><span id="CraveTV" class="featureToggle plus-fa"></span> CraveTV </p>
<p id="CraveTV_list" class="goApps">Stream Showtime hits, HBO classics, the best sitcoms in TV history, and CraveTV originals.  Available on <a href="#">iOS</a> or <a href="#">Android</a>.</p>