In today’s web development landscape, creating a user-friendly and secure user interface is crucial. One common requirement is the need to display sensitive information, such as a mobile number, while still providing users with the option to reveal more details if they choose to. In this tutorial, we’ll explore how to implement a mobile number show-hide feature using HTML, CSS, and PHP.
The Goal
Our objective is to create a web page that initially displays a partially hidden mobile number. When users click on the displayed number, it should toggle between the partial and full mobile number. This functionality provides a balance between user privacy and information accessibility.
Setting Up the HTML Structure
Let’s start with the basic HTML structure. Open your favorite text editor and create an HTML file with the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Add some basic styling */
#mobileNumber {
cursor: pointer;
font-size: 2em;
font-weight: bold;
color: #3498db; /* Blue color */
text-decoration: underline;
}
</style>
<title>Mobile Number Show-Hide Example</title>
</head>
<body>
<?php
// Mobile number variable
$fullMobileNumber = '+123-456-7890';
?>
<div id="mobileNumber">
Mobile Number: <span id="partialMobileNumber"><?php echo substr_replace($fullMobileNumber, 'XXXX', 7, 4); ?></span>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get elements
var mobileNumber = document.getElementById('mobileNumber');
var partialMobileNumber = document.getElementById('partialMobileNumber');
// Original full mobile number
var fullMobileNumber = '<?php echo $fullMobileNumber; ?>';
// Display partial mobile number initially
mobileNumber.addEventListener('click', function () {
// Toggle between showing partial and full mobile number on click
if (partialMobileNumber.textContent === fullMobileNumber) {
partialMobileNumber.textContent = '<?php echo substr_replace($fullMobileNumber, 'XXXX', 7, 4); ?>';
} else {
partialMobileNumber.textContent = fullMobileNumber;
}
});
});
</script>
</body>
</html>
This code sets up the basic HTML structure, includes some styling for the mobile number display, and uses PHP to store and echo the full mobile number.