Tapping on the link does not show the image on iOS devices

I stumbled upon a clever workaround since JavaScript is disabled in our application. This hack works perfectly on Android, but unfortunately not on iOS.

Simply click on "Open" to reveal your image and change the link to "Close"; clicking on "Close" will hide the image and switch back to "Open".

You can also test it out on JSFiddle: https://jsfiddle.net/Ljuscaz8/

 <div id="show">
     <a href="#show" id="open" class="info-block-link"> Open</a>
     <div id="content">
         <a href="#hide" id="close" class="info-block-link-close"> Close </a>
     </div>
 </div>

Here's the corresponding CSS:

#content { 
    display: none !important;
}

#show:target #content {
    display: inline-block !important;
}

#show:target #open {
    display: none !important;
}

Answer №1

After testing it in Safari, I can confirm that it functions properly.

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

Triggering a JQuery Toggle Button

This is the code I'm currently working with: $('.access a').toggle(function() { $('link').attr('href', 'styles/accessstyles.css'); $('body').css('font-size', '16px'); }, fu ...

Combine several svg elements within a single div row using Bootstrap 5

Is there a way to adjust the SVG settings in order to have two of them side by side within a div class="col" element? ...

What is the best way to change the background color of a specific link in the top navigation bar in WordPress?

I'm currently facing a challenge while attempting to create a single link within a WordPress top navigation menu that has a unique background color. Although my approach seems to work on most pages, I've encountered issues where it doesn't ...

Insert some text into the div element. Create a new line

I'm looking to make a specific text on my webpage trigger a new line when displayed in a div. I've been struggling to figure out how to accomplish this: var original= "the text @n to change"; var changed = original.replace(/@n /g, '\ ...

Activate animation while scrolling the page

I am using a progress bar with Bootstrap and HTML. Below is the code snippet: $(".progress-bar").each(function () { var progressBar = $(this); progressBar.animate({ width: progressBar.data('width') + '%' }, 1500); }); <body> & ...

The iOS NSTimer works in the background to compare the alarm time with the current time and initiate audio playback

I've spent hours searching online, but I can't seem to find any information on how to keep an NSTimer running when the app is in the background. Can someone please help me out? I need a function that runs when the app goes into the background, c ...

The vertical scrolling feature seems to be disabled for ng-repeat within the Angular view

I have a list of customers coming from the backend that I need to populate into ng-repeat. However, even though there are more customers, the vertical scroll is not visible. Why is that? <link rel="stylesheet" href="hike.css"> <div ng-show=' ...

Learn how to dynamically update an array in array1 with each new query result from DynamoDB

When querying DynamoDB, the results are stored in a queryResult array. Each new query to the database changes the value of the queryResult array. The issue arises when trying to populate a table view controller with all potential results. I need to create ...

AJAX GET request for fetching HTML data

After making an AJAX request, HTML code is dynamically added to the page. However, links within this dynamic content do not seem to work, unlike manually added HTML which functions properly. Upon inspecting the page source, empty divs are visible (althoug ...

Aligning thumbnail images in a jQuery Mobile listview

Hey, I recently added a list view that includes thumbnails. I used the following code: <ul data-role="listview" data-inset="false" data-theme="a" data-dividertheme="d> <li><a href="image.php?imgid=2"> <img src="../images/comma. ...

The jQuery hide() method conceals an element without affecting its parent

Can't seem to figure out JQuery... So, here's the issue: I've got a page where visitors can enter their email address by clicking on a link inside a div (id="contact"). <div id="contact"><a href="">Interested in leaving your con ...

Utilizing dynamic CSS classes within an ngFor loop

Struggling with my pure CSS star rating implementation, specifically with the hover effect. When hovering on one rating star, the behavior affects the first or all five stars of the previous question. https://i.sstatic.net/cpjvw.png In the provided image ...

Timer Does Not Appear to be Counting Down

I recently added a countdown clock to my website, but I'm having an issue with it not updating in real-time unless the page is refreshed. I'm not very familiar with javascript, so I found some code online and made some modifications myself to sui ...

`Creating a functional list.js filter``

I'm having trouble making the List.js filter function work properly. The documentation for List.js is not very helpful for someone new to development. Below is the code I am using: HTML: <div class="col-sm-12" id="lessons"> <input class= ...

What is the best way to use jQuery to increment the number in an input field by a specific value?

My goal is to utilize jQuery to increment a number in an input field and then display the updated value in the same input field. The specific id of this input field is "total". Here's my attempt so far: function addBag(){ var bagprice = 79.99; ...

The functionality of the controller is not functioning properly in AngularJS

The button syntax is <div class="btn-group" align="center"> <button ng-click="myFunction()" id="one" class='btn btn-primary btn1' >Save Entry</button> <button ng-click="close_window()" id="two" class='btn btn-pr ...

Outlook.com eliminates placeholder links within emails

In my HTML email template, I have included an anchor tag with the href attribute set to a handlebars.js variable. Here is an example: <td class="body-text" align="left" class="padding">For the latest information on this order, please <a href="{{ ...

Distinguishing each unique JavaScript property within an array of objects

I've been struggling with this problem for quite some time. I have an array of objects, focusing on the "00" object at the moment, and I am trying to group together the bestScore properties in a specific way: .. User Group apple .. User Group ba ...

Changing the color of placeholder text with CSS on Squarespace

I'm having a tough time figuring out how to adjust the color of the placeholder text in my form fields. Despite being able to change the background color of the form fields, I can't seem to alter the text color. The placeholder text doesn' ...

Ways to extend the default hover duration for the <a> title attribute (tooltip)

Is there a method to extend the length of time that a tool tip appears when using the title attribute in an HTML tag? In Internet Explorer, it seems to vanish after only around 5 seconds. Is there a way to make it last longer? ...