Having trouble with toggling/display functionality in Javascript on my mobile device

I encountered an issue while using a script to toggle a div on click. Strangely, the content of the div failed to display properly on mobile devices such as Android and iOS. Despite my attempts to troubleshoot the problem, I was unable to identify the cause. Surprisingly, the implementation worked perfectly fine on desktop browsers like Safari and Chrome.

Snippet of My Script

var toggle = function() {
  var mydiv = document.getElementById('newpost');
  if (mydiv.style.display === 'none' || mydiv.style.display === '')
    mydiv.style.display = 'block';
  else
    mydiv.style.display = 'none'
}

My HTML Code

<div id="newpost">
CONTENT
</div>
<input type="submit" class="btn btn-primary" style ="width: 100%; margin-bottom: 20px" value="Click here" onclick="this.style.display='none';toggle();" alt="Click here">
</input>

==

Solution Found

The root cause of the issue was traced back to a CSS animation that was incompatible with mobile devices. By eliminating the animation effects altogether, I successfully resolved the problem and restored functionality across all platforms!

javascriptandroidiostwitter-bootstrap

Answer №1

If you're utilizing Bootstrap, there's a more efficient approach to achieve this. This technique involves the use of jQuery and bootstrap.js.

<div id="content" class="collapse">
   YOUR CONTENT HERE
</div>    
<a href="#" id="toggleBtn" class="btn btn-primary" data-toggle="collapse" data-target="#content">Click to Show</a>

Check out the Demo on JSFiddle

Answer №2

If you're working with bootstrap, you may encounter situations where the .hidden-xs class hides a div on small screens. To make this div visible on extra small devices, use the .visible-xs class instead. Similarly, for small devices, consider using the .visible-sm class.

For example:

<div class="hidden-xs col-sm-3 col-md-3 col-lg-2">
  // The div is hidden on small devices due to the hidden-xs class.
</div>

To show the div on small devices, adjust it as follows:

<div class= "visible-xs col-sm-3 col-md-3 col-lg-2">
   // The div will now be visible on small devices with the visible-xs class applied.
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Alert: The lack of boundary in the multipart/form-data POST data has been detected in an unknown source on line

I am currently developing a file uploader that uploads an image when the input changes. Here is the code for my HTML form: <form method="post" enctype="multipart/form-data"> <input name="uploaded[]" type="file" id="file_upload"/> </for ...

javascriptphpajaxhtmlxmlhttprequest

Caption image on hover

Is it possible to make an image overlap text on a horizontal menu bar when hovering with the mouse? I am designing a horror website and would like a bloody handprint to appear over the links in the menu bar when they are hovered over. I know this can be do ...

javascriptjqueryhtmlcss

Retrieve the attribute from the containing div element

I have nested div elements and I am trying to access the attribute food from the outermost div through the innermost div. How can I achieve this? In the code, I am attempting to display an alert with the value 'banana'. //alert($('.anima ...

javascriptjqueryhtml

Focusing on a particular iframe

I am currently using the "Music" theme from Organic Theme on my WordPress site and have inserted this code to prevent SoundCloud and MixCloud oEmbeds from stretching the page width: iframe, embed { height: 100%; width: 100%; } Although the fitvid ...

javascriptcsswordpressiframe

The function cannot be called with an argument list of type '()'

Hello! I'm just starting out with IOS development and I'm encountering an issue with the constructor of AVAudioRecorder in the resource I'm following. The constructor AVAudioRecorder(URL: filePath, settings: nil, error: nil) seems to be what ...

iosswift

Is there a way to customize Angular's number filter?

I'm trying to achieve a consistent number format with Angular's number filter, regardless of the localization selected. After inspecting the Angular source code on GitHub, I found the implementation of the filter to be like this: function number ...

javascriptangularjsangular-filters

Ways to display or conceal text using Vanilla JavaScript

I am struggling to toggle text visibility using Vanilla JS. Currently, I can only hide the text but cannot figure out how to show it again. <button id="button">my button</button> <div> <p id="text">Hello</p& ...

javascripthtmlcssecmascript-6sass

The issue of a jQuery slider malfunctioning when using an https URL on a Wordpress website

My WowSlider is experiencing issues on the main page of my Wordpress website with https. The images in the slider are stacked statically one after another. However, when the site is accessed with http, the slider works perfectly with the expected transitio ...

javascriptjqueryajaxwordpress

"Exploring the process of loading a local HTML file on AIR SDK Harman

How can I load local HTML files on Air SDK Harman using StageWebView in AS3? It works fine when running on its normal view, but when I create an APK and install it on an Android phone, I encounter an error. The application is unable to display the local HT ...

androidactionscript-3sdkairharman

What is the best way to implement ES2023 functionalities in TypeScript?

I'm facing an issue while trying to utilize the ES2023 toReversed() method in TypeScript within my Next.js project. When building, I encounter the following error: Type error: Property 'toReversed' does not exist on type 'Job[]'. ...

javascriptreactjstypescriptnext.js

Deciphering the GWT compiler's results

Although I'm not a JavaScript developer, I'm currently delving into the process of converting Java code to JS using the GWT compiler in order to identify the root cause of memory growth in our extensive application. Every now and then, I come ac ...

javascriptajaxgwt

Navigating to the bottom of a page once an element is displayed (with react-slidedown)

I'm facing a bit of a challenge here that I haven't been able to resolve yet. So, I have this optin form that is revealed upon clicking on a link. The reveal effect is achieved using react-slidedown. The issue I'm encountering is that when ...

javascriptreactjs

Eslint problem: no-duplicates Fixing issue: cannot load resolver "node"

After performing an update on my project (a SPA using VueJS and Quasar Framework) today with npm update, I am encountering difficulties running it. An error message no-duplicates Resolve error: unable to load resolver "node" keeps appearing in various mod ...

javascriptnode.jsvue.jseslint

Is there a way to mock a keycloak API call for testing purposes during local development?

At my company, we utilize Keycloak for authentication integrated with LDAP to fetch a user object filled with corporate data. However, while working remotely from home, the need to authenticate on our corporate server every time I reload the app has become ...

javascriptangularkeycloak

iOS: Understanding NSURLConnection and how to handle responses before proceeding further

My objective is to receive real-time updates from my server, ensuring that I always have the most recent information. To achieve this, I am running a page where if the response is "Complete" and not "Error", I will then proceed with the Update methods to r ...

asp.netiosxmlios5nsurlconnection

The success callback in JQuery Ajax does not function properly when constructing an array of Ajax calls

I am facing a challenge in building an array of custom objects by resolving promises from an array created based on another array. Consider having an array of letters = ['a', 'b', 'c']. I then map this array to make Ajax call ...

javascriptjqueryangularjsajaxpromise

Traversing a JavaScript array with multiple dimensions containing markers created with Google Maps APIs

I have a single array where I store all of the Google Maps marker objects. Currently, I am working on creating a function to remove all markers from the map that are in the array, but I'm facing issues with the loop. First, I add each marker to the a ...

javascriptjqueryloopsgoogle-maps-api-3each

Struggling with rendering components in REACT?

I'm encountering an issue with rendering the Butcher Shop component. I can't seem to pinpoint what's causing it to be null or undefined. Can someone help me identify the mistake? Nothing is showing up on the DOM and I keep getting this error ...

javascriptreactjsdomrender

Node.js - Error: JSON.Parse and JSON.Stringify are not recognized as functions

Is it possible to convert a string to JSON and vice versa without any additional npm packages? I am currently using JSON.Stringfy in my router.js file. Are there any specific npm modules that need to be added to the project in order to use the JSON.Stringf ...

javascriptjsonnode.jsexpressnpm

AngularJS Service Implementing the Pub/Sub Design Pattern

I've been browsing for solutions to a problem and stumbled upon an answer provided by Mark Rajcok angular JS - communicate between non-dependend services However, I am struggling to fully grasp his explanation, particularly this part: angular.forEa ...

javascriptangularjsdesign-patternspublish-subscribe