CODEWITHSUNDEEP
javascriptjqueryhtmltoggle
Akira Dawson
Akira Dawson

Reputation: 1267

Jquery toggles open and close automatically in mobile

I have implemented some code which works on desktop, but in mobile, it does not work as expected. In mobile, when you click on a div, it should toggle to open up the contents. However, it opens it, then closes it again automatically so the user doesn't get to see the contents. Here is what I have so far:

$(document).on('click touchstart', '.contact_Style h2.general_Click', function() {
    $(this).next().toggle('slow');
});

<h2 class="general_Click">Search </h2>
<div id="search">The Content</div>

Any help would be appreciated.

Upvotes: 0

Views: 825

Answers (3)

Ankush Singhal
Ankush Singhal

Reputation: 31

In My case selector "h2.general_Click" is created 2 times (Please check in your view-source) and that is why it is calling 2 times and closed automatically

Please check your view-source code that your selector is not repeating. If it is repeating then select a sector that do not repeat in your web page.

Upvotes: 0

Mark
Mark

Reputation: 13

I've made a small correction in your code. At first you need to hide your content div by default. Add this in your style file:

#search{display: none}

Then try to use this js code

<script type="text/javascript">
    $(document).on('click', 'h2.general_Click', function() {
        $(this).next().toggle('slow');
    }); 
</script>

Your html would be as it is:

<h2 class="general_Click">Search </h2>

<div id="search">The Content</div>

Upvotes: 0

Zudwa
Zudwa

Reputation: 1400

Just bind to click, because of mobile browsers trigger it on touch, so you get 2 callback calls (Which open and then close content).

You can read about this behavior here

Upvotes: 2

Related Questions